Html Question posted in
Some basic documentation can be found here.

Html – CSS combinator for same element or descendants

Is there a CSS selector combinator for selecting two classes in the same element or in any descendant. For example:

<div class="theme-classic btn"></div>

or:

<div class="theme-classic">
  <div>
    <div class="btn"></div>
  </div>
</div>

If in my CSS file I write: .theme-classic.btn I do not select the descendants.

If in my CSS file I write: .theme-classic .btn I do not select the first case where the classes are on the same element.

Of course, I can do something like:

.theme-classic.btn,
.theme-classic .btn { ... }

But I can’t find a combinator that does both.

Tags:

2

Answers


  1. 0

    This does not exist in CSS.

    You need to select them both separately like you mentioned:

    .theme-classic.btn,
.theme-classic .btn { 
    ... 
}
    Login or Signup to reply.
  2. 0

    CSS nesting can help you simplify the selector and avoid repeating .theme-classic

    .theme-classic {
   :is(& .btn,&.btn) {
     color: red;
   }
}
    <div class="theme-classic btn">Select</div>
<div class="theme-classic"> Don't select</div>
<div class="btn"> Don't select</div>
<div class="theme-classic">
  <div>
    <div class="btn">Select</div>
    <div >Don't Select</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search