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
Styling the New Twitter Widget (Embedded Timeline)
Keep Div Height Relevant to Aspect Ratio
How to Select Multiple Elements That Are Children of Given Element
Prevent Menu from Collapsing in 768Px Display CSS Media Query
Adding CSS Class Through Aspx Code Behind
How to Add a Scroll Bar to a Div
Using a Percentage Margin in CSS But Want a Minimum Margin in Pixels
Horizontally Centering/Evenly Distributed <Li> Inside of <Ul> Inside a <Div>
Make a Grid Column Span the Entire Row
How to Customize Twitter Widget Style
Position Absolute and Bottom 0