--- title: The 30 CSS Selectors You Must Memorize | daily.dev description: We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced selectors. Learn... canonical: https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The 30 CSS Selectors You Must Memorize | daily.dev og:description: We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced selectors. Learn... og:url: https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw og:image: https://api.daily.dev/og/posts/Jqa3RRvJw.png og:image:alt: The 30 CSS Selectors You Must Memorize og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The 30 CSS Selectors You Must Memorize **[Tuts\+](https://daily.dev/sources/tuts_plus)** · 13 min read · 38 upvotes · 5 comments ## Summary We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced selectors. Learn CSS: The Complete Guide to CSS. Learn more about how to use CSS with our guide to CSS3. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@youssefrabeiii** · 7 upvotes > A great article about CSS Selectors; here are the top 10 that I Like > > 1. X + Y(first adjacent selector) > > 2. X ~ Y (every adjacent selector) > > 3. X[title] (attribute selector) > > 4. X[href*="dev"] (All element with the attribute href that has the word dev) > > 5. X[href^="http"](starts with http) > 6. X[href$=".jpg"] (ends with .jpg) > 7. X[data-="foo"] > 8. X[foo~="bar"] (target an attribute which has a space-separated list of values) > 9. X:visited || X:checked (elements that has been clicked or checked) > > 10. X::first-line (Self-explained) **@law27** · 2 upvotes > Nice post **@marcelocesargui** · 1 upvotes > Very nice, improve myself! ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The 30 CSS Selectors You Must Memorize","url":"https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw"},"datePublished":"2020-09-25T00:24:49.964Z","dateModified":"2021-10-07T14:17:10.317Z","description":"We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced selectors. Learn...","image":"https://cms-assets.tutsplus.com/uploads/users/30/posts/12084/preview_image/selectors.png","thumbnailUrl":"https://cms-assets.tutsplus.com/uploads/users/30/posts/12084/preview_image/selectors.png","isAccessibleForFree":true,"articleSection":"Tuts+","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Tuts+","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/tuts_plus","url":"https://daily.dev/sources/tuts_plus"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":38},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"css","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tuts+","item":"https://daily.dev/sources/tuts_plus"},{"@type":"ListItem","position":3,"name":"The 30 CSS Selectors You Must Memorize"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-30-css-selectors-you-must-memorize-jqa3rrvjw","comment":[{"@type":"Comment","text":"A great article about CSS Selectors; here are the top 10 that I Like\n\n\nX + Y(first adjacent selector)\n\n\nX ~ Y (every adjacent selector)\n\n\nX[title] (attribute selector)\n\n\nX[href*=“dev”] (All element with the attribute href that has the word dev)\n\n\nX[href^=“http”](starts with http)\n\n\nX[href$=“.jpg”] (ends with .jpg)\n\n\nX[data-=“foo”]\n\n\nX[foo~=“bar”] (target an attribute which has a space-separated list of values)\n\n\nX:visited || X:checked (elements that has been clicked or checked)\n\n\nX::first-line (Self-explained)","datePublished":"2020-09-25T07:38:43.760Z","url":"https://daily.dev/posts/Jqa3RRvJw#c-P5lYHAzQh","author":{"@type":"Person","name":"Youssef Rabei","url":"https://daily.dev/youssefrabeiii","image":"https://media.daily.dev/image/upload/s--b2nGQMx2--/f_auto/v1749914122/avatars/avatar_4cc7c8bed979438692525f379542ec32?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"Nice post","datePublished":"2020-09-25T05:04:49.479Z","url":"https://daily.dev/posts/Jqa3RRvJw#c-90VJqD3S8","author":{"@type":"Person","name":"Lawrance J","url":"https://daily.dev/law27","image":"https://lh3.googleusercontent.com/a-/AOh14Gi73mv5LJSy8x2HVhG_2KOPZ-JTsn9R9zKU0iVb=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Very nice, improve myself!","datePublished":"2020-09-30T18:20:52.467Z","url":"https://daily.dev/posts/Jqa3RRvJw#c-I1069NLnF","author":{"@type":"Person","name":"Marcelo Guilherme","url":"https://daily.dev/marcelocesargui","image":"https://avatars2.githubusercontent.com/u/17837133?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```