CODEWITHSUNDEEP
csscss-selectors
ux.engineer
ux.engineer

Reputation: 11338

How to define CSS selector, but not when it's nested within itself?

How to define a CSS selector that targets only the highest level element of itself, but not those elements that are nested within the same selector itself?

For example the style rules gets applied to .card element, but not .card .card or .card .card .card elements... ?

Upvotes: 0

Views: 83

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You can negate the styling of the children with the Descendant combinator

.card {
    border: 1px solid black; /* orig style */
    height: 200px;
    width: 50%;
}

.card {
    border: 5px solid red; /* "highest level element of itself" */
}

.card .card {
    border: 1px solid black; /* children of the "highest level element" */
}
<body>
  <div class="card">
    <div class="card">
      <div class="card"></div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions