CSS selectors and it's Specificity(Priority to override other)

What's the problem when a developer didn't understand selectors clearly?

Sometimes 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 a few other problems in applying styles to HTML elements.

  • How to apply the style to all elements which are 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 element to apply the same styles to all.

  • We have to target only one element which should be unique in the entire HTML document.

To solve the 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 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 its name.

p{
    color: green;
}

In the above code snippets, the color green is applied to all p elements in the HTML document.

Class(.)

class(.) selector identifies all the elements have the attribute class. If you have multiple elements with the same class name then the 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 the 2nd box
</div>

Id(#)

id(#) selector identifies only one element has the attribute name id. If you have multiple elements with the 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 identify a specific element(s) when combined with commonly used selectors

Pseudo-Class(:)

As you know pseudo class is used to define the state of the html element such as mouse hover or link after visited. So this can be used as a selector to style the element when an 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 the 2nd child of its parent and applies the color property to green.

li:nth-child(even){
    color: yellow /* selects the li element which is even child of its parent */
}

li:nth-child(odd){
    color: yellow /* selects the li element which is the odd child of its 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 an element that have specific attributes and attribute values, We can use the 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 a 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

  1. id(#)
  2. class(.) ,pseudo class(:),pseudo element(::) and attribute selector
  3. 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 the 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 newcomers to web coding world as there are many more selectors in CSS which are not covered in this blog.

No Comments Yet