What is CSS selector?
CSS Selector is used to select any HTML element(s) such that you can style it.
The syntax of CSS is selector {property:value}.
To start with the CSS, it's necessary to select the correct element, to put styling on. In this blog, all the necessary Selectors are described.
CSS provides the following Selectors -
universal selector
individual selector
class and id selector
and selector (chained)
combined selector
inside an element
direct child
sibling ~ or +
attribute selector
Universal Selector *
Universal Selector is used to select all the HTML element of the webpage. The properties defined under the universal selector is applied to all of the elements.
* {
box-sizing: border-box;
margin: 0;
}
In the example, all html elements are selected and their box-sizing is made to border-box and the margin is to 0.
Individual Selector <element name>
Individual Selector is used to select a particular element of the webpage. The properties defined under the universal selector is applied to all of that elements.
p {
font-size: 2rem;
}
Here the font size of every p tag becomes 2rem.
Class and Id Selector
Classes and Id are HTML attributes. Usually a class is defined on multiple element but id is defined for a particular element.
.<class name> {
display: flex;
}
A dot(.) symbol is used to select a element through the class whereas a pound symbol (#) is used to select a element through the id.
#<id name> {
display: flex;
}
And Selector (chained)
In HTML, any element can have multiple class name. A dot(.) symbol is used to chain multiple class selector.
<h3 class="class1 class2">Heading</h3>
.class1.class2{}
In the example, all the <h3> are selected having both class1 and class2 as its class.
Combined Selector (,)
Multiple CSS Selectors can be combined by separating them by comma(,).
h3,p {
font-size: 2rem;}
Here the font size property is applied to both <h3> and <p> element.
Inside an element Selector
To select a element inside a parent element, that element and parent elements are seperated by <space>.
div p {
font-size: 2rem;}
Here all the <p> elements inside a <div> are selected regardless of the further nesting of the <p> element.
Direct child Selector (>)
To select a child element inside a parent element, child and parent elements are seperated by > symbol.
div>p {
font-size: 2rem;}
Here all the <p> element that are direct child of the <div> are selected. The > selector ignores the grandchild element and the further hirerchy.
Sibling Selector (~ and +)
To select a sibling element ~ or + symbol is used.
+ symbol is used to select first sibling whereas ~ is used to select all the siblings.
<h2 class="sibling">I am selected</h2>
<h2>I am the bigger sibling</h2>
<h2>I am the smaller sibling</h2>
.sibling + h2 {
border: 1px solid red;
}
Here the first <h2> element is selected only.
.sibling ~ h2 {
border: 1px solid red;
}
Here all the <h2> element are selected.
Note - in the above example all the <h2> elements are selected except the one with class="sibling".
And this is the way the sibling selector works. The same applies with + symbol too.
Attribute Selector
[attribute="value"] selector is used to select a element with a specified attribute.
img [alt="logo"] {}
Here all the <img> elements having alt="logo" are selected.
Conclusion
I hope all the basic CSS selectors are discussed above and the code snippets also helped you in understanding the CSS selectors.