The Comprehensive CSS Selectors Cheat Sheet

avatar
(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



0
0
0.000
4 comments
avatar

According to the Bible, Bro. Eli Soriano: What really happened to Joseph Smith?

Watch the Video below to know the Answer...

(Sorry for sending this comment. We are not looking for our self profit, our intentions is to preach the words of God in any means possible.)


Comment what you understand of our Youtube Video to receive our full votes. We have 30,000 #SteemPower. It's our little way to Thank you, our beloved friend.
Check our Discord Chat
Join our Official Community: https://steemit.com/created/hive-182074

0
0
0.000
avatar

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

0
0
0.000