Loading Please Wait...
CSS group selector (selector list) defines a single CSS style rule for multiple HTML elements.
It is defined by the comma (,). These selectors are any combination of general, combinator, and pseudo selectors. It is really helpful for reducing code size and improve consistency.
/* Select h1. */
h1{
font-family: verdana;
}
/* Select h2. */
h2{
font-family: verdana;
}
/* Select h1 and h2. */
h1, h2{
font-family: verdana;
}
/* Select h1 and h2. */
:is(h1, h2){
font-family: verdana;
}
As we can see from the example above, all the rules are for h1 and h2 elements but later one is more readable, consistent, and short.
If a single selector is invalid in a selector list then the whole rule will be ignored.
/* Rule 1: Select h1. */
h1{
font-family: verdana;
}
/* Rule 2: Select h2. */
h2:placeholder{
font-family: verdana;
}
/* Rule 3: Select h1 and h2. */
h1, h2:placeholder{
font-family: verdana;
}
As we can see from the example above, the placeholder pseudo class does not belongs to h2 element, hence it is invalid rule. So Rule 1 is applied to h1 but Rule 2 is not applied to h2. In the case of Rule 3 both h1 and h2 will not be styled cause h2 is invalid. To overcome this we, use :is() or :where() pseudo classes.
:is(h1, h2:placeholder){
font-family: verdana;
}
A relative selector is a selector that begins with a combinator selector(~, +, >, ||) followed by element selection
> #section{
color: red;
}
dt:has(+ p){
color: red;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved