How to select multiple CSS parent and descendant groups efficiently

css child selector
css parent selector
css sibling selector

Is there a more efficient way to select multiple parent and descendant groups?

What I have now:

aside p, aside h1, aside h2, aside h3, aside h4,
article p, article h1, article h2, article h3, article h4,
section p, section h1, section h2, section h3, section h4 {
  width: 75%;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
}

The most performant, concise and specific selector would simply be:

.selector {
    width: 75%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
}

it could be opinable that it will pollute your markup but in pure terms of css performance this is it.

with regards to * selector, its performance is poor and adding a parent selector will NOT improve the situation, as illustrated here

The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector’s subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.

one last remark, aside, article, section are not supported in IE < 8 so any styling won't be picked up by those browsers (unless a polyfill is used but that is a JS only way)

Multiple Class / ID and Class Selectors, What are three Combinators we can use in CSS selectors? element element. div p. Selects all <p> elements inside <div> elements. element > element. div > p. Selects all <p> elements where the parent is a <div> element. element + element. div + p. Selects all <p> elements that are placed immediately after <div> elements.

You could remove all the tag specificity.

p, h1, h2, h3, h4 {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

CSS Selectors, CSS selector guide: what is the difference between CSS parent selector with combinators, and application of one rule to a group of selectors. Using more than one selector is efficient because you style multiple We enumerate CSS descendant selectors and the way to select CSS first of type elements:  I think it’s best to keep the selected element on the right, for consistency’s sake. img:parent(figure) would match all ancestor figure elements of the img. img:nth-parent(2) would select the grandparent of the img. img:parent would select all the ancestors. img:nth-parent(1):filter(figure) would select the parent only it it is a figure

Using pure CSS, your current way is probably the most efficient means, other than setting a class on all the h tags.

Using LESS, you could do something like this:

aside, article, section {
  h1, h2, h3, h4 { ... }
}

Learn Using CSS Selector: Individual & CSS Multiple Selectors Guide, We can select behavior of elements, by selecting the state. This is not an efficient way to target the item to be styled. .parent-class .descendant-class need to be a child element of the element targeted by the parent selector. We can divide pseudo-selectors in 2 groups: based on targeting location,  There have been occasions where I’ve wished I was able to select a parent element with CSS–and I’m not alone on this matter.However, there isn’t such thing as a Parent Selector in CSS, so it simply isn’t possible for the time being.

if there are only (p, h1-h4) in parents you can do that:

aside > *, article > *, section > * {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

it will affect only direct children.

3 levels of CSS-selectors to select all elements, When you group CSS selectors, you apply the same styles to several different The secret to this efficiency-boosting tactic is the comma. The link pseudo class of the anchor elements that are descendants of a division. A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here’s some examples: ul li { } header h2 { } footer a { } .module div { } #info-toggle span { } div dl dt a { } Take ul li { } for example. It means “any list item that is a descendant of an unordered list.”

:matches()

You can use the :matches() CSS pseudo-class function to group your parents and descendants:

:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

Note that, at the time of writing, this is still an experimental technology, so you may want to view the browser compatibility before using this in production.

Older browsers may require using the vendor-prefixed pseudo-class :any():

:-moz-any(aside, article, section) :-moz-any(p, h1, h2, h3, h4),
:-webkit-any(aside, article, section) :-webkit-any(p, h1, h2, h3, h4),
:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

According to CSSWG issue #3258, :matches() might be renamed to :is() in the future:

:is(aside, article, section) :is(p, h1, h2, h3, h4)

Grouping Multiple CSS Selectors in One Style Property, I admittedly don't think about this idea very often how efficient is the CSS that we also referred to as the “key selector” in that ultimately, it is the element being selected. have a class name do something that could be useful on multiple different elements. The descendant selector is the most expensive selector in CSS. The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match. For example, to select only <p> elements that are direct children of <article> elements: article > p

Efficiently Rendering CSS, The second one will only select paragraph elements with that class name. JavaScript will only find the “first” element with that ID, so if you have multiple on the page, In this case, we are applying styling only to descendant divs when the parent div is hovered. So: You can omit that if it's the last property in the group. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.

Little CSS Stuff Newcomers Get Confused About, The child combinator ( > ) is placed between two CSS selectors. For example, to select only <p> elements that are direct children of <article>  Introduction to JavaScript querySelector() and querySelectorAll() methods. The querySelector() is a method of the Element interface. The querySelector() allows you to find the first element, which is a descendant of the parent element on which it is invoked, that matches a CSS selector or a group of CSS selectors.

Combinators, Knowing how to use CSS selectors effectively is useful for Frontend developers. That's why I group this cheatsheet into 8 different types. Basic Selectors; Descendant Selectors; Multiple Selector; Combination Selector; Sibling Selectors​; Pseudo It selects each target that is the first child of its parent. You can group multiple selectors … into one declaration block, … separating each selector with a comma. … This will apply the styles … to all of the matched elements in the list. … You can also mix different types … of selectors in the same list. …

Comments
  • can you add your html?
  • Brilliant. I don't know why I did not see this.
  • I have the default modernizr from H5BP, would that polyfill the aside, article, section, etc?
  • I think it must since my page does style correclty in IE7 & IE8.
  • yes, modernizr already includes a script similar to other html5shim/html5shiv libraries, so no need to do anything else!
  • downvotes without a comment/argument always baffled me!
  • Thank you for your help!
  • Interesting! Similarly, I could use: aside * without the > for all descendants, correct?
  • That's right. But you should remember about selectors priority - if there are some css property for p#inAside - the previous will be ignored.