CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent

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



Leave a reply



Submit