Switchable Models, Personalization, and Onboarding Agent
Home / Blog /
The comprehensive CSS Selectors cheat sheet

The comprehensive CSS Selectors cheat sheet

Tabnine Team /
2 minutes /
February 17, 2020

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 NameSyntaxDescriptionExample
Universal Selector*Selects all the elements* {color: pink;font-size: 20px;}
Type Selectorelement{properties}Selects elements based on element typep {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 attributeinput[disabled] {background-color: #fff;}

element[attribute="value"]Selects elements with the specified attribute equaling a valueinput[type=”text”] {color: black;}

element[attribute~="value"]Selects elements with the specified attribute the value of which contains a specific word. h1[title~="Tabnine"] {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^="Tabnine"] {color: black;font-size: 20px;}

element[attribute$="value"]Selects elements with the specified attribute with the attribute value ending with specified valueh3[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 Combinatorelement1 element2{properties}Selects all specified child descendant elements (element2) under the parent element (element1).div p{color:pink;}
Child Combinatorelement1 > 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 elementsa:link{color:blue;}

element:visited{properties}Selects visited link elementsa:visited{color:red;}

element:active{properties}Selects active link elementsa:active{color:green;}

element:hover{properties}Selects mouseover hover elementsa:hover{color:purple;}

element:focus{properties}Selects in-focus elementsa: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!