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.
0 Comments