CSS Selectors
As we know our website is basically made up of three things HTML,CSS ,JS.HTML is used to make the basic skeleton of our website ,CSS is used to make our website beautiful and JS is used to make our website dynamic or to give functionality to it.And our website is incomplete without any of the above.
Our website is the collection of many tags or elements so in order to style our website we need to give styles to every tags with some sort of tools and these tools are referred to as CSS selectors.In order to understand multiple selectors we need to consider the illustration shown below:-
1) Universal selector:
*{
background : red;
}
In the universal selector the css or style is applied on the complete page .Now after applying the above css our whole page will become red.
2) Individual selector:
p{
background:black;
}
Individual selector is used to select a tag in our HTML page individually.In the above illustration our p tag’s background color will become black.
3) Class and ID selectors:
We could give classes and id’s to the HTML tags and then with the help of them we could target them . Id is unique in the whole HTML page and classes could be used multiple times.Class is represnted by ‘.’ and ids are represented by ‘#’.If we used id multiple times for different tags then our browser would allow it but it’s not the good practice.In the above example we are trying targetting id’s and classes by giving css to them.
.li-class{
font-size:24px;
}
Second and fourth li tags’ font size changed to 24px.
#li-id{
font-size:32px;
}
Third li font size changed to 32 px.
4) And selector(chained selector):
In order to target a particular element among the general elements we use And selectors.Suppose we need to target an li element with class ‘li-class’ we could also go with and selectors.
li.li-class{
font-size:13px;
}
Only the font size of that li changes whose class is li-class i.e ,second and fourth li class font size changes to 13px.
5) Combined selector:
If we want to give same css to multiple tags then we could use it.Suppose we want to give same color i.e red to both li and p tags then we could use combined selectors.
p,li{
color:red
Get Nihalgupta’s stories in your inbox
Join Medium for free to get updates from this writer.
}
6) Inside an element selector:
If we need to target an element by its unique hierarchy then we could refer to this selector.If we want to target a tag hierarchily then,
div ul li a{
background:purple;
}
7) Direct child selector:
If we need to target direct child of a particular tag then we could refer this.In the above code snippet p and ul are the direct child of div tag so we could target any of them with ease.Below we are trying to target p tag (child of div) and giving it a font-size of 40px which is quite large :)
div > p{
font-size:40px;
}
8) Sibling selector:
In the above code snippet we could say ul and p are siblings of each other and all lis are siblings to each other so with this selector we could target the very next sibling of the referred tag.
Its not used very oftenly.This selector could be represented by ‘+’.
#li-id + li{
margin:10px;
}
Here only the fourth li tag is styled with the margin of 10px.
9) Pseudo class selectors and elements:
Pseudo class can be defined as a keyword which is used with the css selectors that defines the special state of the selected elements.It is used with the selector to add some css when there state changes.For example on hovering on focusing etc.Pseudo selectors is always followed by ‘:’.
#li-id:hover{
background:’brown’
}
if we hover the li tag with the id ‘li-id’ then its color changes to brown.
We could also use psudo elements with css selectors. For example after,before,first-letter etc. are some of the most popular psudo elements used. Thy are always followed by ‘::’
p::first-letter {
color: #ff0000;
}
Refer the below image to see the effect of the above psudo element:-
We could also use psudo elements with psudo classes.For instance if we want the above effect (First letter of the paragraph to become red) on hovering we could use,
p:hover::first-letter{
color:red;
}
