The Comprehensive CSS Selectors Cheat Sheet

in #stem8 months ago (edited)

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 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~="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 valueh2[title^="Codota"] {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 valueh4[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;}

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

Sort:  

Hi @techslut!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 5.968 which ranks you at #344 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 93 contributions, your post is ranked at #12.

Evaluation of your UA score:
  • You've built up a nice network.
  • The readers appreciate your great work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

Congratulations @techslut! You received a personal award!

Look's like you do not like Justin. Did you really downvote him?

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

Use your witness votes and get the Community Badge
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Congratulations @techslut! You received a personal award!

Did you downvote Steemit's posts because its owner converted it into a sockpuppets factory? OK, you deserve that badge!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

Use your witness votes and get the Community Badge
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
 8 months ago Reveal Comment