CSS Selectors
CSS selectors target HTML tags to style them. There are over 50 selection methods in CSS language. Some of them we will discuss here like elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.
Let's understand about selectors with the help of following example :
HTML
<body>
<div>Welcome to live class</div>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div>
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
</div>
<section>
<p>Test 1</p>
<p class="sibling">Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
</body>
On the web page it looks like :-
Universal selector :
Universal selector targets every element in the HTML's body tag for CSS styling. CSS
* {
background-color: #242b2e;
color: #e07c24;
}
Output :
Individual selector :
It targets a single element for CSS styling like p, div, section etc. for example
div {
background-color: #1f2f;
color: #000;
}
Class selector:
The class selector selects all elements with the targeted class name. The element having class name knownPara is targeted in the example.
.knownPara {
background-color: rgb(202, 126, 126);
}
ID Selector:
The ID selector targets the elements which has "id" attribute. # is used for this operation.
#para {
background-color: #e07c24;
color: #6a1b4d;
}
And Selector (Chained):
It uses all the class of the element which is going to be targeted.
.bg-black .text-white {
background-color: #35bdd0;
color: chocolate;
padding: 5px;
}
Combined Selector:
In CSS, more than one elements can be selected using comma(,) and this method is called combined selectors. For example :
li,
p {
background-color: #cad5e2;
color: #6a1b4d;
margin: 10px;
}
Descendant Selector:
A descendant, represented by at least one space character ( ), selects elements that are a descendent of the defined element. This selector selects all descendents of the element. For example :
div ul li {
background-color: #edc126;
margin: 0px;
}
Child Selector:
The child (>) combinator is used to select elements that are children, or direct descendants, of the specified element.
div > li {
background-color: #4dd637;
color: #000;
}
Sibling Selector :
The general sibling(~) selector selects all siblings that follow the specified element. And Adjacent sibling(+) selector selects a sibling element that immediate follows a specified element. For example:
.sibling + p {
background-color: #207398;
}
.sibling ~ p {
background-color: #207398;
margin: 0px;
border: #35bdd0 solid;
color: #ff6263;
}
Pseudo-classes :
Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state, to locations, to negations of the former or to languages. Syntax
selector :pseudo-class {
property: value;
}
There are many pseudo-classes, some of them we will discuss here:
:hover
It applies to any element being hovered by the user's pointing device, but not activated.
li:hover {
background-color: orange;
padding: 10px;
border: red solid;
}
:focus
It applies to any element which has the user's focus. This can be given by the user's keyboard, mouse events, or other forms of input.
input:focus {
background-color: #6ac47e;
color: rgb(194, 52, 212);
}
:first child and :last child
It represents to any element that is the first and last child element of its parent element respectively.
p:first-child {
background-color: #edbf69;
}
ul:last-child {
background-color: red;
}
The output of all three pseudo-classes :-
There are some selectors in CSS which are not discussed in this blog like attribute selectors, pseudo-element selectors etc. Practice them also.