訂正内容

 

index.html

  • 1行目の最後に>を追記
<!DOCTYPE html>

 

  • 2行目にlang=”ja”>を追記
<html lang=”ja”>

 

完成版

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>構造的な擬似要素の練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul>
    <li>The first child of ul.</li>
    <li>2nd child.</li>
    <li>3rd child.</li>
    <li>4th child.</li>
    <li>The last child.</li>
  </ul>
</body>
</html>

 

 

style.css

  • 18行目にulを追記
ul:only-child {

 

完成版

body {
  padding: 1% 25%;
  font-family: sans-serif;
}
ul {
  margin: 25px auto 0;
  padding: 12px;
  border: 2px dotted grey;
  list-style-position: inside;
  font-size: 1.5em;
}
li {
  margin: 0;
  padding: 15px;
  border-bottom: 2px solid #224a6b;
}
/*擬似要素を使うと*/
ul:only-child {
  background-color: tomato;
}

The post 訂正箇所:2-7 構造的な擬似要素(CSSのセレクタ) first appeared on TechAcademyマガジン.

情報提供元:TechAcademyマガジン
記事名:「訂正箇所:2-7 構造的な擬似要素(CSSのセレクタ)