How to Select Multiple Elements That Are Children of Given Element

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.

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 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>

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).

How to Select Multiple Elements inside a div for CSS

, separates rules, so you must repeat .divone:

.divone h1,
.divone p {
color: yellow;
}

You can use some CSS preprocessor like LESS or SASS to nest rules:

.divone {
h1,
p {
color: yellow;
}
}

but it will compile to same CSS rules.


Your current rule .divone h1, p says apply for h1 that is inside .divone or any p element on page

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.

Select first child elements of multiple parent elements and apply same class to all

You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e

$('.wrapper').each(function() { 
$(this).children(":first").addClass("noMargin");
});


Related Topics



Leave a reply



Submit