Skip to content

CSS Selector

Types:

  1. universal --> * {} = all tags.
  2. set to all element, overrides browser default, overrides inheritance.
  3. element --> h1 {} = h1 tag only
  4. classes --> .s1{} = <h1 class=s1>, <p class=s1>, etc
  5. reusable.
  6. id --> #s2{} = <h1 id=s2>
  7. can be used only once as id is unique in html.
  8. Attributes --> [disabled] {} =
  9. Combinator --> multiple selector.

  10. eg : #id1 h1 {}

  11. a.active vs a .active

  12. a.active --> it will select anchor with active class.
  13. a .active --> it will pick all desendant of achoe with class active.

img img img

Grouping rule:

selector1,selector1 {
  //common declaration
}

Specifity

  1. scenario : 
    <h1 class=s1> text </h1>

main.css:
   h1{ color : red } h1 { color : green}
// h1{ color : green} h1 { color : red } // change order
  .s1 { color : blue }

which color : ?
  2. cascading mean multiple style can be applied on element which leads to conflict and resolve it provides specifity

  3. preference/priority of selector img

  4. Inheritance : parent has lowest priority.

  5. eg : body is parent of h1 
    body{ color : black}

<body><h1 style="color:green"> </h1></body>
  6. more specific will win.

  7. eg : 

    #id1 h1 {} //1 win
h1 {} //2

  8. !important --> override specifity and will always be applied.

  9. eg : div{ color: red !important} --> color would always be red wahtever the order, inheritance ,etc.

  10. not preferred to use.

  11. <p c1 c2 > text </p> --> priority for c1 and c2. 

    .c1{ color : red}
.c2{ color : blue} //win

here order matter

COMBINATOR

img img img img img