Widget Recent Post No.

what is the difference between class selector and id selector and Class in CSS


   what is the difference between class selector and id selector and Class  in css




SELECTORS


•    Type selectors e.g h1{color:red;}, writing the name of any element will allow u to use different          properties on all of them

•     Id Selector to change the property of elements with with specific id. e.g <p id="aa"> in style                sheet --> #aa{ color:blue;} /* to apply on every id aa found*/ or p#aa{color:blue;} /* to apply on        only paragraphs with id aa*/

•     Class Selector is same as Id Selector instead of #aa or p#aa. For class, we use (.aa or p.aa) and in        <p class="aa">

•   Can't use two ids on same element e.g <p id="a b">or <p id="a" id="b'>. ID is unique, can only           use one id on one element. id can be used many times on different elements but once per element.

•   Can't use more classes on the same element with more than one class property e.g <p class="a"
     class= "b" doesn't work, but <p class="a b" works (space b/w each class)

•   1em = 18px (em = emphasizing of pixels)

•   Universal Selector ---> *{ text align:center;} makes all text align at center

• Target /Descendant Selector ----> p em{ color:blue;} makes the font of all em tags inside of <p>         tags blue. <p><em><i>student</i/</em></p> ---> p em I{color:palegoldenrod;}

• child Selector is the same as target Selector but u use ">" instead of spaces ---                                         >p>em>i{color:palegoldenrod;}

• Group Selector -> to use same styles on different elements e.g h1, p#a, p.b or h1, #a,                             #n{color:khaki;}

• nth child Selector ---> li:nth-child(1) / li:nth-child(odd) /li:nth-child(even)

• {color:white;background-color:white;}

DIFFERENCES



• Priorities ----> Id Selector > Class Selector > Type Selector > Universal Selector.

• Can use alot of classes on one element but can't use more than one id on one element.

• space used in descendant and > used in child.

Post a Comment

0 Comments