To style an element in CSS, there are different ways to select that element. Many of us only know commonly used selectors like class and id or HTML tag, but there are more methods to select an element in CSS. Let's dig deep into CSS Selectors.
CSS Selectors can be divided into these categories
- Basic selectors
- Grouping selectors
- Combinator selectors
- Pseudo selectors
- Attribute selectors
Basic Selectors
Universal Selector *{}
This selector is used to define style for all the elements present in the document. Style defined using this selector is common for all elements. As the name suggests, the style is universal. As soon as the page renders these style gets defined to all the elements.
*{
margin : 0;
padding : 0;
}
This applies margin : 0 and padding :0 to all the elements.
Individual Selector
Selecting an HTML element individually to style is done by an individual selector. This applies style to all the instances of that HTML element present in the document.
div{
background-color : "yellow";
}
p{
background-color : "green";
}
Class and Id selector .className #idName
Selects all elements that have the given class or id attribute.
<p class="bg-green">I am Hulk</p>
<p id="bg-green">I am Hulk</p>
.bg-green{
background-color : "green";
}
#bg-green{
background-color : "green";
}
Grouping Selector ,
, is used to group elements and apply style to them. Instead of repeating same style for each element separately, using grouping selector the style can be applied to group of elements.
div, img{
width : 300px;
height : 300px;
}
#box, .submit-btn {
padding : 10px;
}
Combinator Selectors
Space combinator
The space combinator selects all the elements that are inside previous element. The style is to be applied to the last element
<div class="div2">
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
<li>text</li>
</div>
/* selects all li elements who are descendant of div element */
div li {
color : blue;
}
In the above example, all <li> elements inside div including the ones inside ul will get the color blue.
Child combinator
The child combinator selects elements that are direct children of previous element.
<div class="div2">
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
<li>text</li>
</div>
/* selects only those li elements which are first children of div element */
div>li {
color : blue;
}
/* selects only those li elements which are
first children of ul elements which are children div element*/
div>ul>li{
color : blue;
}
Sibling combinator
1. ~
Styles the second element who is a sibling of the first element.
<div class="div2">
<p>hello</p>
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
<li>text</li>
</div>
p~li{
color : orange;
}
In above example only those <li> elements will get color : orange who are siblings of <p> .
<li> elements inside <ul> will not be styled as they are not siblings of <p> .
2. +
Styles the second element who is an immediate sibling of the first element.
<div class="div2">
<p>hello</p>
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
<li>text</li>
</div>
p+li{
color : orange;
}
This will style only <li> with text "awesome" as it is an immediate sibling of <p> .
Pseudo Selectors
Pseudo classes
A pseudo-class is used to define and style a certain state of an element.
:hover , :link, :active, etc. are examples of pseudo classes.
/* mouse over div */
div:hover{
background-color: "green";
}
/* active link */
a:active{
color : "orange";
}
There are many more such classes, you can check them on official MDN documentation mdn docs.
Pseudo elements
A pseudo-element is used to style a specific part of an element.
::after, ::before are examples of pseudo-elements.
li :: before {
content : '👉';
}
You can check other pseudo-elements on official MDN documentation mdn docs.
Attribute Selectors
Styles an element that has the given specific attribute or attribute values.
[attribute]
This selector is used to select elements with given attribute.
a[target] {
color: blue;
}
styles all <a> elements having attribute "target".
[attribute = "value"]
This selector is used to select elements having attribute with the specified value.
a[target="_blank"] {
color: blue;
}
styles all <a> elements having attribute "target = _blank".
[attribute~="value"]
Selects all elements with attribute containing a space-separated list of words, one of which is the specified value.
<input type="text" name="one" />
<input type="text" name="one two" />
input[name~="one"] {
color: #1f1f1f;
}
In the above example, both the input elements get the defined style as the name attribute of both the elements has "one" as value.
[attribute^="value"]
Selects all elements with the specified attribute, whose value starts with the specified value.
<input type="text" name="one" />
<input type="text" name="onetwo" />
<input type="text" name="twoone" />
input[name^="one"] {
color: #1f1f1f;
}
In the above example, style is applied only to first two input elements as the value starts with "one".
[attribute$="value"]
Selects all elements whose attribute value ends with the specified value.
<input type="text" name="one" />
<input type="text" name="onetwo" />
<input type="text" name="twoone" />
input[name^="one"] {
color: #1f1f1f;
}
In the above example, style is applied only to first and third input elements.
[attribute*="value"]
Selects all elements whose attribute value contains the specified value. It works like pattern matching, the specified value should be anywhere inside the attribute's value.
<div class="tinyflower"></div>
<div class="rose-flower"></div>
<div class="flowerlarge"></div>
div[class*="flower"]{
background-color : grey;
}
In the above example, it matches for "flower" inside value of "class" attribute, hence all three div elements are styled.
Those were the CSS selectors used to style an element. Coding and experimenting with these selectors will help understand them better.
Happy Coding!!! 🧑💻