Menu
I have a question regarding CSS selectors. How do I select a <div> with a specific class name only when its inside a <ul> with a class name saft? This CSS class is used elsewhere and I don't want to change the styling everywhere.
<div id="floater"> <ul class="saft"> <li><div class="textSlide"></li> </ul> </div> 
324
The element element selector is used to select elements inside elements.
URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.
We can use document. querySelector on to select a div and then select an element within it with the given class after that. We just call querySelector on the element with the ID mydiv to select items inside that div.
CSS Selector - How to use CSS nested element Selector The element element is called nest selector or Descendant Selector. It selects elements inside elements. We can use Descendant Selector to select an element based on its status as a descendant of another element.
Simply use the CSS descendant selector (a space) between the parent element and the descendant element:
ul.saft div.textSlide { /* CSS rules */ } JS Fiddle demo.
In this case the rules applied to the div of class textSlide will only apply if its ancestor is a ul of the class saft. You could, instead, use the immediate child combinator, the > but then you'd have to specify the div in relation to each parent/ancestor up to the one whose class is required, which gives potentially difficult to maintain CSS (not in this case, but it can, over time, become problematic).
119
Just do:
ul.saft .textSlide {
This achieves what you need
27
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
