CSS Selector for Multiple Sub-Elements

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 */
}

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.

How can I simplify these CSS selectors?

If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:

.test:hover :is(h2, p) {
  text-decoration: underline;
}

<div class="test">
  <h1>An H1</h1>
  <h2>An H2</h2>
  <p>A paragraph</p>
</div>

CSS selector, multiple class's to style diferente elements

You should know that by writing
.documents_table td, th, { styles } The styles are applied to all td inside .documents_table and to ALL th from your html. Not just the ones in the .documents_table . Your selector should be .documents_table td, .documents_table th

Having said that, to style the td and ths from both tables you should write

 .documents_table td, 
.documents_table th, 
#documento_detalhe td, 
#documento_detalhe th { 
...styles 
}

BUT, it would be better to add a common class to both tables like '.my-table' and so you would write just .my-table td, my-table th { styles } and it would apply to both.

See below

.my-table th, .my-table td {
    color:red;
 }

<table id="documento_detalhe" class="my-table">
  <tr><th>TH #documento_detalhe<th></tr>
  <tr><td> TD #documento_detalhe<th></tr>
</table>

<table class="documents_table my-table">
  <tr><th>TH documents_table<th></tr>
  <tr><td> TD documents_table<th></tr>
</table>

Apply CSS rule to multiple elements within a sub-class

If you have some container for those divs, you can then use the :not selector (as Harry mentioned in the comment):

.main :not(.class-1) .class-5 {  color: red;}

<div class="main">  <div class="class-1">    <div class="class-5">      <!-- could be any text element -->      <h1>1</h1>    </div>  </div>  <div class="class-2">    <div class="class-5">      <!-- could be any text element -->      <h1>2</h1>    </div>  </div>  <div class="class-3">    <div class="class-5">      <!-- could be any text element -->      <h1>3</h1>    </div>  </div>  <div class="class-4">    <div class="class-5">      <!-- could be any text element -->      <h1>4</h1>    </div>  </div>  <div class="class-5">    <div class="class-5">      <!-- could be any text element -->      <h1>5</h1>    </div>  </div></div>

CSS Syntax to select multiple elements under a class

The code .home(.a,.c,.e) won't work, and there is no OR operator for CSS selectors. home .a,.home .c,.home .e is the shortest way.

But here a few selectors that might help you:

.home div { } /* all divs in home */
.home > div { } /* all divs that are a direct child of .home */
.home * { } /* all elements in .home */
.home > * { } /* all direct children of .home */

There also exist CSS preprocessors, like SASS and LESS that give you more possibilities.

How to select amongst multiple elements having same css?

What you want to achieve is not possible with CSS selectors.

:nth-of-type() would get you the closest, but only evaluates amongst siblings and will not find the nth item across levels.

You could use a CSS selector to identify all of the elements with that class, and then filter select the 3rd node, but that would not be as efficient and would require more code to maintain.

If you can use the XPath (//span[@class='nav-label'])[3] and it is working for you, then stick with that XPath expression.

How to style multiple child elements based on parent element selector condition

Without seeing your HTML code it difficult to know exactly what will work, but this should:

#parentDiv:hover div {

}

#parentDiv:hover span {

}

With this, when the div is hovered over, the child span and div will have whatever styles you add within applied.

For example:

#parentDiv:hover div {color: blue;}
#parentDiv:hover span {color: red;}

<div id="parentDiv"><div>Div Element</div><span> Span Element</span></div>

CSS select nested elements up to N levels deep

This is impossible in all CSS versions up to present and as far as I know a Descendant Level Selector that selects all elements up to a specified level is not planned to be implemented anytime soon.

---

What you can do instead is set a class to all the elements you want to be selected and use:

.container .class {
    border-left: 1px solid;
    padding-left: 15px;  
 }

---

If you can't make any alterations in your HTML or use JavaScript, then what you currently have is your best bet.

---

Related Topics