What's the problem when a developer didn't understand selectors clearly?
Sometime we apply styles to some html elements but don't work as per our code and finally end of with bug in our code. To avoid this kind of bugs developers should clearly understand the concept of css selectors and it's specificity.
The following are few other problems in applying styles to html elements.
How to apply style to all elements which is nested inside one element.
We face a challenge to select all odd and even li elements in a list and apply different styles to each.
If we have more than one elements to apply same styles to all.
We have to target only one element which should be unique in the entire html document.
To solve above problems we use the different types of selectors and apply styles to html elements.
What is selector in css ?
In general english ,we can say a thing that selects something. So like that selector in css is also selects or find the HTML elements.Selectors are used to target the html elements to apply styles on it.
Most commonly used and selectors are
- HTMl element/Tag name Called as Type selector
- class
- id
In Css,we can have more selectors which are little bit tricky to understand like
- pseudo classes
- pseudo element
- attribute selectors
- universal selector
- Combinator(multiple selectors combined)
Let's explore each selector one by one
Type Selector(By tag name)
We can select one or more elements by it's name.
p{
color:green;
}
In the above code snippets, color green is applied to all p elements in html document.
Class(.)
class(.) selector identifies all the elements have the attribute class.If you have multiple elements with same class name then same styles are applied to all elements.See the code below.
.box{
width:200px;
height:200px;
border:1px solid #ccc
}
<div class="box">
I am box
</div>
<div class="box">
I am 2nd box
</div>
Id(#)
id(#) selector identifies only one element have the attribute name id.If you have multiple elements with same id then it selects the first element.Check the code below
#avatar{
width:100px;
height:100px;
border-radius:50%;
border:1px solid #ccc
}
<div id="avatar">
avatar
</div>
<div id="avatar">
avatar2
</div>
The above style is applied only to the first div element.
All advanced selectors are identifies a specific element(s) when combined with commonly used selectors
Pseudo-Class(:)
As you know pseudo class is used to define state of the html element such as mouse hover or link after visited. So this can be used as selector to style the element when element in a particular state.
Common pseudo-classes are :hover,:visited,:link and :active.These are combined with other selectors to find the specific state of the element and apply style on it
a:hover{
color:tomato /* On mouse hover,color of a is tomato color */
}
a:visited{
color:red /* On linked visited,color of a is red */
}
We can select the a particular numbered children of the parent element by using the :nth-child() and a particular numbered children of the parent element counted from last by :nth-last-child.
li:nth-child(2){
color:green
}
The above code selects every li element which is 2nd child of it's parent and apply color property to green.
li:nth-child(even){
color:yellow /* selects the li element which is even child of it's parent */
}
li:nth-child(odd){
color:yellow /* selects the li element which is odd child of it's parent */
}
li:nth-lat-child{
color:blue /* selects the li element which is 2nd child but counting from last*/
}
Pseudo-Element(::)
Mostly common pseudo elements are ::before and ::after.These are used to place/add some content to specific part of the element such as before or after.
span::before{
content:url('left-arrow.png);
padding:2px
}
span::after{
content:url('right-arrow.png);
padding:2px
}
Other rarely used pseudo elements are ::first-letter and ::first-line selects first letter of the word and first line of paragraph respectively.
p::first-letter{
font-size:36px;
font-weight:bold
}
p::first-line{
font-weight:bold
}
Attribute Selector([attribute])
To apply styles to element that have specific attributes and attribute values,We can use attribute selector.
a[href="https://www.google.com"]{
color:violet /* All a with href and it's value https://www.google.com are colored with violet. */
}
input[type="text"]{
border:none /* No border property applied to all inputs with attribute type and it's value text. */
}
a[target]{
background-color:cyan /* All a tags with attribute target have background color cyan */
}
Universal Selector(*)
This selector selects all the elements when it defined.
*{
background:#f5f5f5
}
It selects all elements and apply background color as #f5f5f5
Combinator Selectors (+,>,space and ~)
We can combine two elements with +,> space and ~ to identify relative elements of two combined elements
Descendant Selector(space)
This type combination matches all the elements(element after space) which are descendants of specified element(element before space).See the example below.
div p{
color:red /*It selects all the p elements which are inside div element*/
}
<div>
<p>I am small paragraph.</p><!--Color is red-->
<section>
<p>I am paragraph inside section</p><!--Color is red-->
</section>
</div>
Children Selector(>)
It matches all the elements(element after >) which are immediate children of specified element(element before >).
div > p{
color:red /*It selects all the p elements which are only immediate children div element*/
}
<div>
<p>I am small paragraph.</p><!--Color is red-->
<section>
<p>I am paragraph inside section</p><!--Color is black-->
</section>
</div>
Adjacent Sibling selector(+)
It identifies the all elements(element after +) which are adjacent sibling elements of specific element(before +).
div + p{
color:#ccc;/*selects all p elements that are placed immediately after div elements*/
}
General Sibling Selector(~)
This type of selector selects all elements that are siblings of a specified element.
div ~ p{
color:#ccc;/*selects all p elements that are siblings of div elements*/
}
Selector Specificity(Priority to override other)
Specificity means how browser calculate and apply style to html elements (Which type of selector high priority to override other selector's property)
Find the list of selectors from high to low specificity/Overriding priority
- id(#)
- class(.) ,pseudo class(:),pseudo element(::) and attribute selector
- Type Selector(Html Tag name)
Universal selector (*) and combinators (+, >, ~, space) have no effect on specificity.
We can not override the inline style from internal and external styles as inline style has high priority of overriding all external and internal styles.We can override inline styles from external and internal styles by using "!important" beside any property.
p{
color:cyan!important;
}
<p style="color:red">I am paragraph</p>
Color of the paragraph is cyan as inline style color property is overridden by !important beside the property
Note:-I have written this blog for the newbie developers and my intention is to make understood all commonly used selectors to new comers to web coding world as there are many more selectors in css which are not covered in this blog.
Top comments (0)