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.
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 selector for some childs with same parent
No there is not in pure CSS, but you can use some CSS preprocessor like:
- LESS CSS http://lesscss.org/
- Sass http://sass-lang.com/
- Switch CSS http://sourceforge.net/projects/switchcss/
- ...or other
How to generalize a CSS rule to specific children of the same element without repeating the parent's reserved word?
As G-Cyrillus suggested, you can use one of the pseudo-classes :is()
or :where()
to list multiple element types at the end of your article > …
selector:
article > :is(h2, h3, p, picture) {
margin-left: 16px;
margin-right: 16px;
}
<article>Inside an article:
<h1>h1 (shouldn’t be styled)</h1>
<h2>h2</h2>
<p>p</p>
<picture>Inside a pic:
<h2>h2 that is not a direct child of the article (shouldn’t be styled)</h2>
</picture>
</article>
Style both parent and child element in css
If you want separate class names with the same styles, use a comma ,
between CSS selectors.
.brand-logo,
.wpc-logo {
height: 100%;
}
Or you can create a common class to apply to both elements.
.common {
height: 100%;
}
<a href="#" class="brand-logo common">
<img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo common"/>
</a>
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)
CSS: Select multiple classes' child
Use the :is()
pseudo-class selector
:is(.parent1, .parent2, ...) > child {
...
}
Only style one child when another child in parent exists
You could use this:
.ContentHeader hgroup h1:nth-last-child(2) { /* your code here */}
Complex CSS selector for parent of active child
You can use has()
:
li:has(a:active) {
/* ... */
}
Unfortunately, there's no way to do that with CSS.
It's not very difficult with JavaScript though:
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
Related Topics
Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable
What Is the Best Method for Tidying CSS
I Want to Change the Select Icon/Dropdown Icon to (Fa-Chevron-Down). How Can I
Resource Interpreted as Script But Transferred with Mime Type Text/X-C++
Outlook 2010 Not Respecting CSS, Even <Font> Tags for Every Text
Placing a Fixed Element Above Browser's Scrollbar
Stretch Horizontal Ul to Fit Width of Div
Do We Need Type="Text/CSS" for <Link> in HTML5
Page Content Don't Scroll When Keyboard Shows Phonegap
Applying CSS to Google Visualization Table
Internet Explorer 10+ Media Queries and Responsive Break Points
Combining Pseudo-Selectors in CSS
Border-Radius Doesn't Work on Ie10
What Is the Recommended Way to Dynamically Set Background Image in Angular 4
Overflow:Hidden Not Working as Expected in Google Chrome