Multiple Descendant Children Selector with CSS

CSS select multiple descendants of another element

You can now do this with :is() selector. If it requires larger selection, you can exclude the smaller ratio using :not as a combination with it as in the code snippet:

This selector can be used in latest versions of all the 4 major browsers (Edge, Firefox, Chrome and Safari): https://caniuse.com/?search=is as on 26/1/2021.

.match-elements :is(.match-1,.match-2,.match-5,.match-10) {
  background: #5548B0;
}

.match-elements :not(:is(.match-1,.match-2,.match-5,.match-10)) {
  background: #BADA55;
}

/* For snippet styling, not required */

.match-elements div {
  font-family: sans-serif;
  font-weight: 600;
  color: white;
  padding: 10px;
  margin: 10px 0;
}

<div class="match-elements">
  <div class="match-1">Matched using is</div>
  <div class="match-2">Matched using is</div>
  <div class="match-3">Matched using not</div>
  <div class="match-4">Matched using not</div>
  <div class="match-5">Matched using is</div>
  <div class="match-6">Matched using not</div>
  <div class="match-7">Matched using not</div>
  <div class="match-8">Matched using not</div>
  <div class="match-9">Matched using not</div>
  <div class="match-10">Matched using is</div>
</div>

Multiple descendant children selector with css

The not(.bbb) will match any div without the class .bbb and you have a lot of them between .aaa and .ccc that why the text is red. To do what you want you need to consider two selectors

.aaa .ccc {  font-size: 20px;  color: #FF0000;}/*we reset the style if children of .bbb*/.bbb .ccc {  color: initial;  font-size:initial;}

<div class="aaa">
  <div>
    <div>
      <div class="bbb">
        <div>
          <div>
            <div class="ccc">AQUI</div>
          </div>
        </div>      </div>
    </div>
  </div>
</div>

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

CSS multiple child selectors vs single tag selector performance

~~Per MDN: Avoid the descendant selector.~~~

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.

If you think it through logically, with a descendant selector, the CSS engine will check each child of the parent element (in this case .styled-table) looking for matches (in this case the td tag) and then each child of those children and so on and so forth.

With a child selector, though, you're telling the engine exactly which "path" to follow to look for a match. If it fails to find a match at any point in the path (e.g., if your .styled-table does not have a tbody as one of its immediate children) then it will abandon the selector.

Select all child elements recursively in CSS

Use a white space to match all descendants of an element:

div.dropdown * {
    color: red;
}

x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.

The asterisk * matches any element.

Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors

CSS performance: descendent or two direct descendent selectors best?

The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them).

For example, if an element has an ID, then only ID rules that match the element’s ID will be checked. Only Class Rules for a class found on the element will be checked. Only tag rules that match the tag will be checked. Universal Rules will always be checked.

Avoid the descendant selector

The descendant selector is a more expensive selector than a child selector

BAD(Descendant selector)

sets the text color to black whenever an 'a' occurs anywhere within an 'ul' element

 ul a {
  color: black
}

BETTER Than above(Child selector)

'a' element must be the child of an 'li' element; the 'li' element must be a child of an 'ul' element

 ul > li > a {
  color: black
}

further reading LINK