Select Multiple Child in CSS

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)

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.

Selecting multiple child elements of a certain parent element

CSS does not support what you want.

Both Sass and Less do (by chance, exactly as you have written it).

Sass:

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Less:

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Both products are very mature, share just about every feature the other does, but do have some minor differences between what they extend that make them not 100% compatible with each other (prior to generating CSS).

CSS - Is it possible to select multiple different child elements within a parent without repeating the parent?

The :is() selector should do what you mention.
For your specific example

<div id="about">
    <h1>My</h1>
    <h2>Name</h2>
    <h3>Is</h3>

, you could use the is() selector as

#about :is(h1,h2,h3) {
  color:red;  //or whatever property you want to add
}

Check out this video for more info.

How to select multiple child elements of an element

For your question in the comments:

If you have p's inside a .example and you want all of them to be changed on button click, you can change your function to this:

function myFunction() {
  var element = document.querySelectorAll('.example p');
  for(i = 0; i <= element.length; i++) {
    element[i].style.backgroundColor = 'red';
  }
}

'old' question

You can use the + CSS selector in your querySelector.

Making it

document.querySelector(".example + p").style.backgroundColor = "red";

function myFunction() {
    document.querySelector(".example + p").style.backgroundColor = "red";
}

<!DOCTYPE html>
<html>
<body>

<h2 class="example">Dont be a racist hate everyone.</h2> 

<p>Hello lovely people</p> <!-- This element I wish to make red -->

<button onclick="myFunction()">Try it</button>

</body>
</html>

Can you use multiple child selectors in one css element?

If you want to target the "outer" links, you should do just as you wrote:

ul.top > li > a {
   color: red;
}

If you want to target the "inner" links, just use any of the following selectors:

ul.top ul a {
   color: green;
}

ul.second > li > a {
   color: green;
}

Multiple nth Child statements

If I understand you right, you want every 15th element after the 10th to be blue? So the first blue element would be the 25th? Then the 40th, 55th etc.

The thing is, 10n + 15 doesn't do that.

10 * 1 + 15 = 25 // right
10 * 2 + 15 = 35 // wrong
10 * 3 + 15 = 45 // wrong

Sounds like you want 15n + 10:

15 * 1 + 10 = 25 // right
15 * 2 + 10 = 40 // right
15 * 3 + 10 = 55 // right

So the actual selector would be:

div:nth-child(15n + 10) {
    color: blue;
}

Unfortunately this will also select the 10th element. And I'm assuming you want blue to override red wherever applicable, except for the 10th element which shouldn't match. So you need to add another selector to reset the 10th element.

div:nth-child(10) {
    color: red;
}

Here's a jsFiddle demo: http://jsfiddle.net/mvdzc99b/

EDIT

The requirements have changed, but I will leave the original information here for reference.

To select all of the first 10 you can use -n+10. However to select the next 15 is a bit more tricky. You need to use a range from 11 to 25, which is done by combining 2 :nth-child() selectors:

:nth-child(n+11):nth-child(-n+25) { ... }

The next 15 would be

:nth-child(n+26):nth-child(-n+40) { ... }

You get the picture.

jsFiddle: http://jsfiddle.net/mvdzc99b/3/

div {

    margin: 2px;

    width: 10px;

    height: 10px;

    background: black;

    float: left;

}

div:nth-child(-n+10) {

    background: red;

}

div:nth-child(n+11):nth-child(-n+25) {

    background: blue;

}

div:nth-child(n+26):nth-child(-n+40) {

    background: green;

}

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

CSS : selecting multiple nth-child

perhaps something like this would work?

div div p:not(:first-child)

found in Style every thing except first child

nth-child for multiple children

I think this will do:

p:nth-child(5n + 1), p:nth-child(5n + 2)

https://jsfiddle.net/a6xgzLs5/

Select Multiple Child in CSS