CSS Selectors

CSS Selectors are used to target an HTML Element or group of elements based on selector we are using.

Type of css selectors

css selectors
CSS Selectors

List of Popular Selectors in CSS.


CSS Selectors List

SelectorCodeUse
Tag Selectorp{}Used to call all p tags
ID Selector#para{}Used to call that unique element with id para.
Class Selector.para{}Used to call group of different elements with class para
Tag with Class Selectorp.para{}Used to call only p elements with class para
Grouping Selectorh1, h3, h5{}Used to group <h1>, <h3> <h5> elements
Descendant Selectordiv p{}Used to call all p elements of div, i.e, children, grand children and so on.
Child Selectordiv > p{}Used to call only child p elements of div, not grand and great grand.
Universal Selector*{}Used to call all elements in web document.

Tag Selectors

The first Major selector in css is TAG Selector. Tag Selectors are LEVEL 1 in css. All html elements can be called in css using their tag name. Tags can be used more than once, so all elements will be called.

Tag Selector in css

This heading will be red.

This text will be blue color and center align.

Another text will be blue color and center align.


<style>
        body{ background:lightgray;}
	h3{ color:red}
	p{ color:blue; text-align:center}
</style>

    <h3>This heading will be red.</h3>
    <p>This text will be blue and center align.</p>
    <p>This text will be blue and center align.</p>

ID Selectors


ID Selector is used to call an HTML Element by its unique id name. Id is always unique in a single web page. We can not give same ID to two different HTML Elements in a webpage.
Id is basically an attribute used in opening or start tag. Inside double quotation, the value of ID is given. ID value is single, means no white space separation
In css code, Id is always starts with HASH ( #), than id value.

CSS Id Selector

This heading will be green.

This text will be red and background yellow.

i am a paragraph without id


<style>
    #head1{ color:green}
    #para{ color:red; background:yellow}
    p{ color:blue}
</style>

    <h3 id="head1">This heading will be green.</h3>
    <p id="para>This text will be red and background yellow.</p>
    <p>i am a paragraph without id</p>

Class Selectors


Class Selector in css is used to call all html Elements with same class group.
Class represents a group of different or same elements. We can give same Class name to two or more different HTML Elements.
Class is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of Class is given.
In css code, class always starts with DOT ( .), than class value.

CSS Class Selector

This heading will be red.

This heading will be red too.

This text will be white, background is blue and font style is italic.


<style>
    .head{ color:orange}
    .para{ color:white; background:blue}
    .text-italic{ font-style:italic}
</style>

    <h5 class="head">This heading will be red.</h3>
    <h3 class="head">This heading will be red.</h3>
    <p class="para text-italic">This text will be white, background is blue and font style is italic.</p>

Grouping Selector


Grouping is used to call a group of HTML Elements by tagname, classname or id.
Unlike Class selector, we don't need to create attribute first.
We can group multiple tags, IDs and Classes. We have to use COMMA (,) to separate Selectors in grouping.

Grouping Selector in css

This heading will be blue and center aligned.

This heading will be blue and center aligned.

This para will be blue and center aligned.


<style>
    h5, h3, p{ 
	   color:blue; 
	   text-align:center;
    }
</style>
	<h5>This heading will be red.</h3>
	<h3>This heading will be red too.</h3>
	<p class="para>This para will be red too.</p>

Nesting in CSS


Nesting is used to call a particular child of parent Element.
If we are calling a P tag, all Para Tags will be selected.
We can Nest a particular tag of parent using nesting.
We use single space bar to relate child of that particular element.

CSS Nesting Selector


This para is inside div


This para is outside div.

		
<style>
    p{ color:red}
    .header p{ color:white; background:gray}      /*This is Nesting */
</style>
	<div class="header">
            <p>This para is inside div.</h3>
	</div>
	
    <p>This para is outside div.</p>

In Example above, all paragraphs are assigned red color, but para inside header class is assigned color white and background gray.


Universal Selector *


Universal Selector or * is used to call all html elements in css.

CSS universal Selector

This is Heading 1

This is Heading 3

This is a para

		
<style>
    *{ margin:0}
</style>
	
    <h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <p>This is a para</p>
>

CSS Selectors Priority

!important ( 100%) > inline css > Id > class > nesting > tag > * > parent


CSS Selector Specificity

css selector specificity
CSS Selectors Specificity

CSS Selectors Specificity is calculated on the basis of selector used. Tag selectors is having a value of 1, class selectors is having value of 10, id selector is having value of 100 and inline css is having value of 1000.
!important rule is having maximum value, means no one can break priority of important.


    <style>       
        p{ }                        //  value  is 1
        div p{ }                    //  value  is 1+1, i.e. 2
        .para{ }                    //  value  is 10
        p.para{ }                   //  value  is 10+1, i.e. 11
        #para{ }                    //  value  is 100
        p#para{ }                   //  value  is 101
        p{ color:red !important; }  //  value is more than all selectors
    </style>

For Detailed list of CSS3 Selectors, click here CSS3 Selectors