Combining CSS selector

vancouver·2023년 4월 18일
0

CSS 이해하기

목록 보기
9/23

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Combining CSS Selectors</title>
  <link rel="stylesheet" href="./style.css">
</head>

<!-- Don't change any of the HTML code! -->

<body>
  <h1>To Do List</h1>
  <h2>Monday</h2>
  <div class="box">
    <p class="done">Do these things today!</p>
    <ul class="list">
      <li>Wash Clothes</li>
      <li class="done">Read</li>
      <li class="done">Maths Questions</li>
    </ul>
  </div>

  <ul>
    <p class="done">Other items</p>
  </ul>
  <p>The best preparation for tomorrow is doing your best today.</p>
    
</body>

</html> 

CSS

/* Group */
h1,
h2 {
  color: blueviolet;
}

/* Child */
.box > p {
  color: firebrick;
}

/* Descendent */
.box li {
  color: blue;
}

/* Chained */
li.done {
  color: green;
}

/* Multiple Combiners */
ul p.done {
  font-size: 0.5rem;
}

Result

0개의 댓글