CSS Select Multiple Descendants of Another Element

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>

How to select multiple elements that are children of given element?

You'll have to reference #mydiv twice...

#mydiv > pre, #mydiv > div

I removed the extraneous div element selector as the ID is specific enough.

CSS Select a 2nd descendant

Based on MDN Web Docs

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

Clearly here the <a> is not being siblings of each other, so your selector is not correct on the first image.

Though the second selector of yours is correct as <li> are siblings.

CSS selector for multiple sub-elements

Modern Option

Note: it may not be compatible with older browsers:

.live_grid :is(h1,h2,h3,h4,h5) {
    /* style here */
}

See here for more information about :is(): https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Standard Option:

If you want to style all the headers in that class, you have to do it like this (which could also be done without the line breaks). Notice each selector has .live_grid in it:

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

When you comma separate things, they're independent of each other - hence the need to reference the class again.

For example:

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

This would set the text-color for everything in the #myDiv1 element, everything in the #myDiv2 element, and everything in the .live_grid element to having text color blue.

This also explains the reason your CSS is matching all the headers - you're referencing them individually, separated by commas - there is no selector for their containing element(s).

CSS pre-processor option

Or, you can always go with something like LESS or SASS which allows you to write nested rules something like this:

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

Custom class option

Lastly, you could add a class to all of your headers and just refer to that class:

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}

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>

jQuery descendants selector with multiple selector

'.parent textarea,input,select' string contains three unrelated selectors divided by ,. You need to add the .parent to the input and select as well:

'.parent textarea, .parent input, .parent select'

CSS :not() selector on all descendants

In your example, the :not() selector is applied to the a element. This would only select a tags that did not have a .mystyle class on it.

#content > * > *:not(.mystyle) a {
    color: green;
}

The above will select any descendants 2 levels down that don't have a .mystyle class, then colour all their decendant a tags green.

Below is a working example:

#content > div > div:not(.mystyle) a {  color: green;}

<div id="content">  <div id="one">    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --></div>  <div id="two">    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --></div></div>

Selector for all a tag descendants

For all descendants, use:

#tab-banner *

For direct descendants, use:

#tab-banner > *

Edit:

As the op changed/clarified the question:

To find all descendants of a specific type, just use that type instead of *. Example:

#tab-banner a

So, what you are trying is correct. If the style doesn't apply to the elements that you expect, then those elements are actually not descendants of that section, or you have another rule that takes prescedence.

CSS Select Multiple Descendants of Another Element