Menu
Can anyone tell me what's the selector for finding an element which is within a parent, but not an immediate child. Example:
<body class="main">
<p class="text">Hello</p> <!-- don't select this one -->
<elem class="something">
<elem id="link">
<elem class="otherclass">
<p class="text">Hello</p> <!-- but this one -->
</elem>
</elem>
</elem>
</body>
so I want to find .text via .main without knowing the number of elements in between and with pure CSS.
Thanks
648
Method 1: Use :not(:first-child) to not Select First Child. The “:not(:first-child)” selector defines the rule that does not select the first child of the parent tag. This selector will help us to exclude applied CSS styling for the first element.
By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.
The :empty CSS pseudo-class represents any element that has no children.
The :first-child selector allows you to target the first element immediately inside another element.
You could use the following selector:
.main > * .text
Which will select all .text elements that are descendants of .main, but not immediate children.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
