1. Tag / Element selector Use the built-in html element name, e.g. div, body, span, p, ul etc. body { // style applies entire body(including child tags)... } Enter fullscreen mode Exit fullscreen mode 2. Descendant selector <p> <a> direct descendant</a> <span><a> Indirect descendant</a></span> </p> <style> p a { // Apply styles to all 'a'(anchor) elements withing the paragraph p } </style> Enter fullscreen mode Exit fullscreen mode 3. Child selector <p> <a> direct descendant</a> <span><a> Indirect descendant</a></span> </p> <style> p > a { // Apply styles to direct descendant only! } </style> Enter fullscreen mode Exit fullscreen mode 4. Attribute selector Select an element with a specified attribute p [ id ] { // Apply styles to p element with id attribute set to anything } p [ id = 'fist' ] { // Apply styles to p element with id attribute set to 'first' } Enter fullscreen mode Exit fullscreen mode 5. Select by Id Probably the most common selector ?? <body> <div id= "container" ></div> <div id= "not_a_container" ></div> </body> <style> #container { // style applies to div with id attribute set to 'container' } </style> Enter fullscreen mode Exit fullscreen mode 6. Select by Class Second most common? No ? Ok. <body> <div class= "container" ></div> <div class= "not_a_container" ></div> </body> <style> .container { // style applies to div with class attribute set to 'container' } </style> Enter fullscreen mode Exit fullscreen mode 7. Pseudo selectors Typically used to apply styles based on user events e.g. On mouse hover a :hover { font-weight : bold ; } // set the font weight of all links to bold on mouse hover Enter fullscreen mode Exit fullscreen mode 8. Nth Child Selector This is best explained using an example <div> <p> Fist </p> <p> Second </p> <p> Third </p> <p> Fourth </p> </div> <style> p :nth-child ( 2 n ) { color : red ; } // This will affect each p element inside the parent div who ' s position is a // multiple of 2 </style> Enter fullscreen mode Exit fullscreen mode 
Top comments (0)