'How to use a single CSS parent class for styling grandchildren elements? [duplicate]

Given the following snippet, how can I use the parent class for styling the grandchild element?

<body>
  <div class='parent'>
    <ul>
      <li>grandchild</li>
    </ul>
  </div>
</body>
htmlcss


Solution 1:[1]

.wrapper * {
    display: inline; 
}

So what .wrapper * is telling is us to select any selector (* being the wildcard) that's nested in the .wrapper class.

If you want to recursively select ul elements inside of the .wrapper, you can just use what you already have. However, if you want only ul elements that are direct children of the div, you can use the .wrapper > ul selector.

Solution 2:[2]

You can also use .wrapper *:first-child to get the first element nestled inside the parent element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mr. Sir
Solution 2 Isaac Newton

Related Questions