0

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>
kevinjaypatel
  • 45
  • 9
  • What is the expected result? This is unclear to me and may be good to know to answer the question. When reading your question I was thinking about [nth](https://www.w3schools.com/cssref/sel_nth-of-type.asp) but this is also a [selector](https://www.w3schools.com/css/css_selectors.asp). – Christian Apr 21 '22 at 21:57
  • 1
    Use `.wrapper * { display: inline; }` for the _"Apply to all part"_ – ruleboy21 Apr 21 '22 at 21:59
  • Your code already does what your question is asking. – hamza765 Apr 21 '22 at 22:02
  • `.wrapper ul > li { list-style-type: none; margin: 0; padding: 0; }` This could work, but it uses selectors. – Infui0ayaan Apr 21 '22 at 22:04
  • @hamza765 not necessarily, I would like the wrapper class to display inline for all child elements. If that was true, all child elements would be displayed horizontally – kevinjaypatel Apr 21 '22 at 22:23
  • check this out then: https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element – hamza765 Apr 21 '22 at 22:27

2 Answers2

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.

Mr. Sir
  • 41
  • 1
  • 2
0

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

Isaac Newton
  • 15
  • 1
  • 2