There is no shortage of various CSS cheat-sheets and quick reference guides online. However, most of them target web designers and only a handful are aimed at the developer crowd. Especially when it comes to backend developers who suddenly find themselves writing frontend automation with CSS selectors.
Sure, you can go ahead and have some fun learning CSS through online minigames. If you are so inclined and have the free time to dedicate to gamified expansion of your skillset – go for it. But if you’re looking for a focused and short CSS selectors cheat sheet made for developers – we’ve created one just for you.
What are CSS Selectors (and why you need them)?
Generally speaking, CSS (Cascading Style Sheets) are awesome. CSS are like libraries for a website, and they have been one of the best things to happen to the way the web looks and works in the past 20 years.
CSS selectors are components in the CSS rulebase and are at the heart of advanced CSS. They essentially save you a lot of manual coding by letting you easily manipulate multiple elements according to their properties.
The latest iteration of CSS, CSS 3.0, added selector options for styling automation. With the selector options added you can write your code to select pretty much any element in the website or webapp frontend.
CSS Selectors Cheat Sheet for Developers
| Selector Name | Syntax | Description | Example |
|---|---|---|---|
| Universal Selector | * | Selects all the elements | * {color: pink;font-size: 20px;} |
| Type Selector | element{properties} | Selects elements based on element type | p {color: pink;font-size: 20px;} |
| Id Selector | #id{properties} | Selects an element with a specified id | #adbox {width: 80px;margin: 5px;} |
| Class Selector | .class{properties} | Selects elements of the specified CSS class | .dark {color: black;} |
| Attribute Selectors | |||
element[attribute]{properties} | Selects elements with the specified attribute | input[disabled] {background-color: #fff;} | |
element[attribute="value"] | Selects elements with the specified attribute equaling a value | input[type=”text”] {color: black;} | |
element[attribute~="value"] | Selects elements with the specified attribute the value of which contains a specific word. | `h1[title~="Codota"] {color: pink;font-size: 20px;}' | |
element[attribute"ן="value"] | Selects elements with the specified attribute and attribute value with the attribute beginning with specified value (or specified value immediately followed by “-“) | ' a[hreflangן="en"] { color: blue;}' | |
element[attribute^="value"] | Selects elements with the specified attribute with the attribute value starting with specified value | h2[title^="Codota"] {color: black;font-size: 20px;} | |
element[attribute$="value"] | Selects elements with the specified attribute with the attribute value ending with specified value | h3[title$="Right Now!"] {color: red;font-size: 30px;} | |
element[attribute*="value"] | Selects elements with the specified attribute where the attribute value contains a specified value | h4[title*="new"] {color: red;font-size: 20px;} | |
| Descendant Combinator | element1 element2{properties} | Selects all specified child descendant elements (element2) under the parent element (element1). | div p{color:pink;} |
| Child Combinator | element1 > element2{properties} | Selects all specified immediate child elements (element2) under the parent element (element1). | div > p{color:pink;} |
| Pseudo Classes | |||
element:link{properties} | Selects unvisited link elements | a:link{color:blue;} | |
element:visited{properties} | Selects visited link elements | a:visited{color:red;} | |
element:active{properties} | Selects active link elements | a:active{color:green;} | |
element:hover{properties} | Selects mouseover hover elements | a:hover{color:purple;} | |
element:focus{properties} | Selects in-focus elements | a:focus{color:pink;} |
Got more? Let me know in the comments!
This post, written by yours truly, was published originally on the Codota blog for awesome developers.
P.S. Sorry for the markdown butchering my code examples. Hope you forgive me just his once. <3