CSS Selectors Pseudo Classes Cheat Sheet

CSS Selectors Cheat Sheet
CSS Selectors Cheat Sheet

CSS selectors

CSS selectors are used to select any HTML element in different ways. Here we have tried to share the most used and important CSS selectors cheat sheet. It has all kind of Cascading Style Sheets selectors that a developer should know. We have shared the CSS pseudo classes, HTML attribute selection etc. CSS Selectors are the patterns utilized to select the HTML element(s) you want to style.
The types of CSS selectors are Type selector, Class selector, ID selector, Universal selector, Adjacent sibling combinator, General sibling combinator, Child combinator, Descendant combinator, Column combinatory and Attribute selector. We have used all types of CSS selectors in this post. We have shared the CSS Pseudo-classes and CSS Pseudo-elements as well. CSS tricks are shared here every week so keep on visiting us.

CSS Selectors Cheat Sheet

CSS Selectors Cheat Sheet

CSS selectors cheat sheet

CSS Selector Example Example description
.class .myclass It is used to selects all elements with attribute class=”myclass”
#id #myid It is used to selects the single element having attribute id=”myid”
* * It will selects all elements in an HTML page
element name p The only tag name is used to selects all tags of this name here it is all <p> elements
element,element div, p You can select multiple tags comma saperated here it is all <div> tags and all <p> elements
element element div a This formate is used to selects all elements within a parent element here it is <a> elements inside <div> elements
element>element div > a This will selects all <a> elements where the parent is a <div>
element+element div + a This formate is used to selects all <a> elements that are placed immediately after the <div> elements
element1~element2 div ~ ol It will selects every <ol> element that are preceded by a <div> element
[attribute] [data] Use an attribute name to select all elements containing this attribute. Here selects all elements with a “data” attribute
[attribute=value] [target=_blank] It will selects all elements with target=”_blank”
[attribute~=value] [title~=whatmobile] It will selects all HTML elements with a title attribute and containing the word “whatmobile”
[attribute|=value] [lang|=en] It will selects all HTML elements with a attribute of lang value starting with value of “en”
[attribute^=value] a[href^=”https”] This will select all those <a> tags who have href attribute value that begins with “https”
[attribute$=value] a[href$=”.pdf”] If you want to select all elements that ends with a specific string. Here it will select all those <a> element who have href attribute value ends with “.pdf”
[attribute*=value] a[href*=”howtocode”] This will selects all those <a> element who have an href attribute value that contains the substring “howtocode”
:active a:active It is used to select all the active links
::after div::after It is used to insert something after the content of each <div> element HTML page
::before div::before If you want to Insert something before the content of each <div> element in an HTML page
:empty div:empty It is used to selects every <div> tag that has no children (including text nodes)
:first-child a:first-child This pseudo class is used to select all <a> element that is the first child of its parent
::first-letter span::first-letter This css selector will select the first letter of all <span> HTML tag
::first-line p::first-line It is used to select the first line of all the <p> HTML element
:first-of-type span:first-of-type It is used to select all the <span> tags which are the first <span> element of its parent
:hover a:hover It is used select all links on mouse over
:lang(language) p:lang(en) All <p> element with an HTML lang attribute equal to “en” (English) will be selected
:last-child p:last-child All the <p> elements who are the last child of their parent elements will be selected
:last-of-type span:last-of-type It is used to select all the <span> tags which are the last <span> element of its parent
:link a:link It will select all the unvisited links in an HTML page
:not(selector) :not(p) It will select all elements but not the <p> element
:nth-child(n) span:nth-child(2) It will select all <span> elements who are the second child of their parents
:nth-last-child(n) p:nth-last-child(2) It is used to select all the <p> elements who are the second child of their parents (counting starts from the last child)
:nth-last-of-type(n) p:nth-last-of-type(2) It will also select all the<p> tags who are the second child of their parents (counting starts from the last child)
:nth-of-type(n) p:nth-of-type(2) It will select all the <p> tags who are the second <p> tag of their parents
:only-of-type p:only-of-type It will select all those <p> elements who are the only <p> elements of their parents
:only-child span:only-child It will select all those <p> tags who are the only child of their parents
:root :root It is used to select the document’s root element
::selection ::selection It will select the portion of an element that is selected by a user
:target #tips:target It will select the current active #tips element (clicked on a URL thaat has the anchor name)
:visited a:visited It will select all visited links in an HTML document

CSS Selectors for form elements

CSS Selector Example Example description
:checked input:checked It will selects every checked <input> tags
:default input:default It is used to select the default <input> element
:disabled input:disabled It is used to select every disabled <input> HTML tag
:enabled input:enabled It is used to selects every enabled <input> element in an HTML form
:focus input:focus This is used to select the input element who has focus
:in-range input:in-range It is used to select all input elements with a value within a specified range in a HTML page
:indeterminate input:indeterminate It is used to select all input form tags that are in an indeterminate condition
:invalid input:invalid This pseudo class will select all input elements with an invalid value
:optional input:optional This pseudo class will select all the form input elements with no “required” attribute
:out-of-range input:out-of-range It will select all those input elements who have a value outside a specified range
::placeholder input::placeholder It is use to select all the input elements who have a placeholder text in it
:read-only input:read-only It is used to select all the input tags with the “readonly” attribute specified in it
:read-write input:read-write It will select all the input elements who have the “readonly” attribute NOT specified in it
:required input:required It will select all the input elements with the “required” attribute specified
:valid input:valid It will select all input elements who have a valid value

Comments