-2

My target to make the "FRUITS" by blue color and make the "CITRUS" by purple: color.But i shouldn't use any id or class. I should use All CSS Pseudo Classes. Can anybody help me understanding how it work? I use this example: [Nested Unordered List in a Parent Ordered List

ul li:last-child ol li {
 color: #2dcc18;
}

ul > li:first-line {
 color: #ddda0f;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
<h2>Garden</h2>
<ul>
 <li>item:
  <ol>
   <li>FRUITS</li>
   <li>FRUITS</li>
   <li>FRUITS</li>
  </ol>
 </li>
 <li>Овощи:
  <ol>
   <li>Помидор</li>
   <li>Картошка</li
  </ol>
 </li>
</ul>
<h2>Garden</h2>
<ul>
 <li>Item:
  <ol>
   <li>CITRUS</li>
   <li>CITRUS</li>
   <li>CITRUS</li>
  </ol>
 </li>
 <li>Овощи:
  <ol>
   <li>Помидор</li>
   <li>Картошка</li
  </ol>
 </li>
</ul>
</body>
</html>

Proper way to make HTML nested list?

Maxim Gordiyenko
  • 97
  • 1
  • 10

1 Answers1

1

To restrict the text color style to the order list items of the first or second h2 element, you could use :nth-of-type or :first-of-type/:last-of-type pseudo-classes, for example:

h2:nth-of-type(1) + ul li:first-child ol li {
    color: blue;
}

h2:nth-of-type(2) + ul li:first-child ol li {
    color: green;
}

Or, alternatively:

h2:first-of-type + ul li:first-child ol li {
    color: blue;
}

h2:last-of-type + ul li:first-child ol li {
    color: green;
}

This should set the text of the first ordered list following the first h2 to blue, and that of the second h2 to green.

Robert Lysik
  • 471
  • 1
  • 3
  • 10
  • many thanks it's really work. Could you help me, give me link where is i can learn more about pseudo-classes. – Maxim Gordiyenko Feb 12 '18 at 09:41
  • Maxim, thank you, I'm glad this helped you. I highly recommend the website [CSS-Tricks](https://css-tricks.com/almanac/selectors/n/nth-of-type). – Robert Lysik Feb 13 '18 at 00:19