How do I select an element only when inside another element?

by

Simply use the CSS descendant selector (a space) between the parent element and the descendant element:

ul.saft div.textSlide {
    /* CSS rules */
}


* {
  margin: 0;
  padding: 0
}

li {
  list-style-type: none;
}

ul.saft div.textSlide {
  background-color: #f90;
  font-weight: #000;
}
<ul class="saft">
  <li>
    <div class="textSlide">Some text in a textSlide class element</div>
  </li>
</ul>
<div class="textSlide">Some more text, also in a textSlide element</div>

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).

More Related Contents:

  1. Is there a CSS parent selector?
  2. Complex CSS selector for parent of active child [duplicate]
  3. Select every Nth element in CSS
  4. CSS3 selector :first-of-type with class name?
  5. CSS Selector that applies to elements with two classes
  6. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  7. CSS ‘>’ selector; what is it? [duplicate]
  8. CSS selector based on element text? [duplicate]
  9. Pure CSS checkbox image replacement
  10. Handling a colon in an element ID in a CSS selector [duplicate]
  11. CSS selector for attribute names based on a wildcard
  12. IE8 :nth-child and :before
  13. CSS selector to select first element of a given class
  14. Can I use variables for selectors?
  15. Combine :after with :hover
  16. CSS: styled a checkbox to look like a button, is there a hover?
  17. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  18. :active css selector not working for IE8 and IE9
  19. CSS Selector for
  20. How can I apply styles to multiple classes at once?
  21. Is it possible to select the last n items with nth-child?
  22. CSS property value from class name
  23. LESS CSS: abusing the & Operator when nesting?
  24. Angular 2: How to style host element of the component?
  25. Targeting position:sticky elements that are currently in a ‘stuck’ state
  26. Select odd even child excluding the hidden child
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment