--- title: Your Guide to Several CSS Selector Types description: Your Guide to Several CSS Selector Types image: https://blog.amandadanielson.us/hubfs/pexels-photo-270360.jpeg --- [![](https://blog.amandadanielson.us/hs-fs/hubfs/Screenshot%202024-08-12%20at%207.59.34%20PM.png?width=325&height=262&name=Screenshot%202024-08-12%20at%207.59.34%20PM.png)](https://design-assets.hubspot.com/vast/homepage) [![Learn More](https://no-cache.hubspot.com/cta/default/3430653/8927e3e1-ad9b-434f-8b88-71fb16871fc9.png)](https://cta-redirect.hubspot.com/cta/redirect/3430653/8927e3e1-ad9b-434f-8b88-71fb16871fc9) # Corgi mode ![Jane Austin Headshot](https://blog.amandadanielson.us/hs-fs/hubfs/Photos%20of%20Me/photo_2.jpg?width=500&name=photo_2.jpg) ### Jane Austin #### CEO Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![Emma Watson Headshot](https://blog.amandadanielson.us/hs-fs/hubfs/Random%20headshots/aleni-stoakes-578340-unsplash.jpg?width=500&name=aleni-stoakes-578340-unsplash.jpg) ### Emma Watson #### Sr. Sales Engineer Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![Sarah Jones Headshot](https://cdn2.hubspot.net/hub/2427570/hubfs/Assets/Images/Headshots/IMG_3315.jpg?width=500&name=IMG_3315.jpg) ### Sarah Jones #### Marketing Automation Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![joey joe Headshot](https://blog.amandadanielson.us/hs-fs/hubfs/Random%20headshots/ethan-hoover-311143-unsplash.jpg?width=500&name=ethan-hoover-311143-unsplash.jpg) ### joey joe #### Content Marketer Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![Tara Jepson Headshot](https://cdn2.hubspot.net/hub/2427570/hubfs/Assets/Images/Headshots/IMG_3289.jpg?width=500&name=IMG_3289.jpg) ### Tara Jepson #### Staff Software Engineer Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![Shannon McGrath Headshot](https://cdn2.hubspot.net/hub/2427570/hubfs/Assets/Images/Headshots/7K0A0259.jpg?width=500&name=7K0A0259.jpg) ### Shannon McGrath #### Recruiter Lorem ipsum dolor sit amet, ei quod consectetuer eam, has erat forensibus disputationi te. Possit discere principes et usu. ![](https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png) ## [Your Guide to Several CSS Selector Types](https://blog.amandadanielson.us/en/your-guide-to-several-css-selector-types) ** Aug 19, 2017 4:30:00 PM / by [Amanda Danielson](https://blog.amandadanielson.us/en/author/amanda-danielson) - [Tweet](https://twitter.com/share) **Universal selector**: overrides all other selectors - * { } **Type selector (element selectors)** - Uses the html name as selector - Ex: body ![pexels-photo-270360.jpeg](https://blog.amandadanielson.us/hs-fs/hubfs/pexels-photo-270360.jpeg?width=693&height=462&name=pexels-photo-270360.jpeg) **Id selectors**: - Can target an element based on an id attribute - #primary-content (matches html attribute with that id) - In html:
- An element can only have one ID (the div above can only have one) - A page can only have one element with the same ID name in a given html file - Once an id name is used, it cannot be used anywhere else. - Carry more weight than class—styles in id selector take precedence over those defined in class **Class selectora** The difference between class and id selectors is that IDs are unique to one element, but classes can be used to target more than one element. - Defined with .classname {} - Only target elements with matching class selectors - An element can have multiple classes assigned to it - You are able to apply both a class and an ID to an element ![startup-photos.jpg](https://blog.amandadanielson.us/hs-fs/hubfs/startup-photos.jpg?width=638&name=startup-photos.jpg) **Descendant selector** Targets an element that’s a descendent of another element - Ex: targets a span tag within header - Useful for targeting lists     ul li {        color: white;        background-color: tomato;        } **Pseudo classes**: - Special keywords added to selectors - Link history pseudo-classes style links that have or haven’t been clicked - a:link, hover, focus, and active are examples Topics: [stormi new tag](https://blog.amandadanielson.us/en/topic/stormi-new-tag?hsLang=en) ![Amanda Danielson](https://app.hubspot.com/settings/avatar/c4b2a447c172e41f120b088973f8a5c2) #### Written by [Amanda Danielson](https://blog.amandadanielson.us/en/author/amanda-danielson) New HubSpot support engineer [**](https://www.linkedin.com/in/amanda-danielson-a06936a8/) ### Subscribe to Email Updates ### Posts by Topic - [stormi new tag (4)](https://blog.amandadanielson.us/en/tag/stormi-new-tag) - [test (3)](https://blog.amandadanielson.us/en/tag/test) - [pets (2)](https://blog.amandadanielson.us/en/tag/pets) - [Lead Capture (1)](https://blog.amandadanielson.us/en/tag/lead-capture) - [SEO (1)](https://blog.amandadanielson.us/en/tag/seo) - [beach (1)](https://blog.amandadanielson.us/en/tag/beach) [see all](https://blog.amandadanielson.us/en/your-guide-to-several-css-selector-types#) ### Recent Posts - [ Blog](https://blog.amandadanielson.us/en/blog) - Blog - [ Blog](https://blog.amandadanielson.us/en/English) - [Francais Blog](https://blog.amandadanielson.us/fr/blog) #### About Us Dorm DJs [Learn More](https://www.hubspot.com) #### Links #### Contact Us ** 1232223333 ** [yourname@company.com](mailto:yourname@company.com) ** 25 First Street Cambridge, Massachusetts 02141 Copyright 2026 | Designed with ** by [HubSpot](https://www.hubspot.com) [**](https://blog.amandadanielson.us/en/your-guide-to-several-css-selector-types#) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Amanda Danielson", "url" : "https://blog.amandadanielson.us/en/author/amanda-danielson" }, "dateModified" : "2019-10-07T21:52:44.353Z", "datePublished" : "2017-08-19T20:30:00.000Z", "headline" : "Your Guide to Several CSS Selector Types", "image" : [ "https://blog.amandadanielson.us/hubfs/pexels-photo-270360.jpeg" ], "mainEntityOfPage" : { "@id" : "https://blog.amandadanielson.us/en/your-guide-to-several-css-selector-types", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.amandadanielson.us/hubfs/Screenshot%202024-08-12%20at%207.59.34%20PM.png" }, "name" : "amanda" } } ```