[Total: 3    Average: 5/5]

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.

css expert meme

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;}

Comprehensive CSS Cheat Sheets

As noted at the start of this post, there are a lot of CSS cheat sheets on the Internet and a few of them are even useful for developers. If our short and abridged CSS selectors cheat sheet doesn’t cover your CSS sheet cheating needs, here are a few that might:

Know of a better CSS selectors cheat sheet? Or better better – created the perfect CSS selector cheat sheet? Let us know in the comments!


Codota_Banner_JavaScript_1.1


About the author

Ilana is a content writer for the Codota.com blog

Leave a Reply