Logo
HTMLCSSJavaScriptReactjsnewContactUpdates

Get started today

HTMLCSSJavaScriptReactjsnewContactUpdates

Tools

Resume BuilderQR GeneratorVS Code Editor

Connect

GitHubWhatsApp Channel
01introduction
02types of css
03comments
04css selectors
05color property

#Selectors

  1. 1. Introduction

    • 1. It is used to target elements , so that we can apply property.

  2. 2. Simple Selector

    • 1. Tag Selector:- To target element using tag selector we have to use tagname.

      Syntax:- 

      1 tagname  {  property:value; }

    • 2. Id Selector:- To target element using id selector we have to use hash(#) before the id name.

      Syntax:-

      1 #id_name {  property:value; }

    • 3. Class Selector:- To target element using class selector we have to use dot/period (.) before the class name.

      Syntax:-

      1 .class_name {  property:value; }

    • 4. Universal Selector:- It is used to target all html elements in webspage.It's symbol is asterisk(*).

      Syntax:-

      1 * {  property:value; }

    • 6. Grouping Selector:- To target multiple elements we can use grouping selector and to group selectors, simply separate each selector with a comma(,).

      Syntax:-

      1 selector1,selector2 {  property:value; }

  3. 3. Combinator Selector

    • 1. Descendant Child Selector:- To target all Direct Childs and Indirect Childs we have to use space after the parent selector.

      Syntax:-

      1 Parent Child {  property:value; }

    • 2. Direct Child Selector:- To target only direct childs we have to use angular bracket(>) after the parent selector.

      Syntax:-

      1 Parent > Child {  property:value; }

    • 3. General Sibling Selector:- To target all general siblings we have to use tilde (~) after the parent selector.

      Syntax:-

      1 Parent ~ Sibling {  property:value; }

    • 4. Adjacent Sibling Selector:- To target the immediate/ nearest sibling we have to use plus (+) after the parent selector.

      Syntax:-

      1 Parent + Sibling {  property:value; }

  4. 4. Attribute Selector

    • 1. By Attribute selectors , we can target elements based on the attributes and their values.
    • 2. Selector[attribute_name] :- This targets all elements that have the specified attribute, regardless of its value.

      Example:- Apply background color red , where p tag has class attribute.

      1 p[class]{ background-color:red; }

    • 3. Selector[attribute_name = 'value'] :- This targets all elements that have the specified attribute with a value that exactly matches the given value.

      Example:- Apply background color yellow , where p tag has class food.

      1 p[class ="food"]{ background-color:yellow; }

    • 4. Tagname[attribute^=value] :- It is used to target prefix/starting value.

      Example:- Apply background color blue , where p tag has class movie as first position.

      1 p[class ^="movie"]{ background-color:blue; }

    • 5. Tagname[attribute_name $='value'] :- It is used to target suffix/last value.

      Example: Apply background color yellow , where class ends with chombu.

      1 p[class $='chombu'] { background-color:yellow; }

    • 6. Tagname[attribute_name ~='value'] :- It is used to target values that are separated by space or value which is nearby space.

      Example: Apply background color blue , where class is chombi at any position.

      1 p[class ~='chombi'] { background-color:blue; }

    • 7. Tagname[attribute_name *='value'] :- It is used to target value at any position , it searches for the contained value.

      Apply background color green , where class name contains chombi.

      1 p[class *='chombi'] { background-color:green; }

  5. 5. Pseudo Class Selector

    • 1. Pseudo Class Selectors are used to target elements on the basis of their state.
    • 2. Pseudo-classes are written with a colon (:) followed by the name of the pseudo-class.
    • 3. :link pseudo-class :- It is used to target the unvisited state i.e., when the link is not visited by the user.

      1 a:link{ color:red;}

      Here, it will target not visited state of the link.


    • 4. :active pseudo-class :- It is used to target the active state i.e., when the user clicks on the link.

      1 a:active{ color:yellow;  }

      Here, it will target the active state of the link.


    • 5. :visited pseudo-class :- It is used to target the visited state i.e., when the link has been visited by the user.

      1 a:visited{ color:green;  }

      Here, it will target the visited state of the link.


    • 6. :hover pseudo-class :- It is used to target the hover state of an element i.e., when the user holds their mouse pointer over the element.

      1 div:hover{ background-color:aqua;  }

      Here, it will target the hover state of the element(div).


    • 7. :first-child pseudo-class :- It is used to target the first child of an element.

      1 div first-child { background-color:red; }

      Here, it will target the first child of the parent (div) element.


    • 8. :last-child pseudo-class :- It is used to target the last child of an element.

      1 div last-child { background-color:red; }

      Here, it will target the last child of the parent (div) element.


    • 9. :nth-child(position) pseudo-class :- It is used to target the nth child of an element or child present at any position.

      1 div nth-child(3) { background-color:red; }

      Here, it will target the child present at third(3) position within the parent (div) element.


    • 10. :nth-child(odd) pseudo-class :- It is used to target all the odd childs of an element.

      1 div :nth-child(odd) { background-color:red; }

      Here, it will target all the odd positioned childs within the parent (div) element.


    • 11. :nth-child(even) pseudo-class :- It is used to target all the even childs of an element.

      1 div :nth-child(even) { background-color:red; }

      Here, it will target all the even positioned childs within the parent (div) element.


    • 12. :first-of-type pseudo-class :- It is used to target the first element of its type within its parent element.

      1 div p:first-of-type { background-color:red; }

      Here, it will target the first <p> within the parent (div) element.


    • 13. :last-of-type pseudo-class :- It is used to target the last child of its type within its parent element.

      1 div p:last-of-type { background-color:red; }

      Here, it will target the last <p> within the parent (div) element.


    • 14. :nth-of-type(position) pseudo-class :- It is used to target the nth element of its type within its parent element.

      1 div p:nth-of-type(4) { background-color:red; }

      Here, it will target the fourth(4) <p> tag within the parent (div) element.


    • 15. :nth-of-type(odd) pseudo-class :- It is used to target all the odd childs of its type within its parent element.

      1 div p:nth-of-type(odd) { background-color:red; }

      Here, it will target all the odd <p> tags within the parent (div) element.


    • 16. :nth-of-type(even) pseudo-class :- It is used to target all the even childs of its type within its parent element.

      1 div p:nth-of-type(even) { background-color:red; }

      Here, it will target all the even <p> tags within the parent (div) element.


  6. 6. Pseudo Element Selector

    • 1. To target specific part of an element.They are denoted by a double colon (::) before the name of the pseudo-element.
    • 2. ::first-letter pseudo-element :- It is used to target the first letter of an element.

      1 p::first-letter{ font-size : 30px;  }

      Here, first letter of <p> tag is targetted.


    • 3. ::first-line pseudo-element :- It is used to target the first line of an element.

      1 p::first-line{ background-color : yellow;  }

      Here, first line of <p> tag is targetted.


    • 4. ::selection pseudo-element :- It is used to target the selected content of an element i.e.,content selected by the user.

      1 p::selection{ background-color : red; }

      Here, the selected content of <p> tag will be targetted.


    • 5. ::marker pseudo-element :- It is used to target the marker (i.e. bullets) of a list item.

      1 ul li::marker{ content : '✨'; }

      Here, the bullets of list will be targetted and emoji will be displayed in place of bullets.


    • 6. ::before pseudo-element :- It is used to create a pseudo element before the content of the container, inside the container.

      1 div::before{ content : 'I am before'; }

      Here, the pseudo element is inserted inside the container(div) before the container's content.


    • 7. ::after pseudo-element :- It is used to create a pseudo element after the content of the container, inside the container.

      1 div::after{ content : 'I am after'; }

      Here, the pseudo element is created inside the container(div) after the container's content.


#Specificity/Priority

  1. 1. !important :- Highest priority.
  2. 2. Id Selector :- Second Highest priority
  3. 3. Class Selector :- Third Highest priority
  4. 4. Tag Selector :- Fourth Highest priority
  5. 5. Grouping Selector :- Same priority as tag selector , if tags we grouped. same for id and class , etc.
  6. 6. Universal Selector :- Least priority

Join Our Community

Login to Join

© 2025 Saket Bhatnagar. All rights reserved.