CSS Selectors Cheat Sheet Syntax

In this post we are going to discuss a number of CSS selector types. You are going to find examples and explanations about CSS class selectors, CSS selectors multiple classes, CSS attribute selectors, CSS selectors last, CSS selectors parent, hover selectors CSS, CSS element selector first, CSS image element selector, CSS element selector example, CSS reference element selector, CSS selector descendant and many other CSS selectors. Here is the CSS selectors cheat sheet syntax for you:

CSS Selectors Syntax Cheat Sheet

Selector Example Description/Explanation CSS Version
.(class name) .my_class It will select all elements with class=”intro” 1
#(id name) #my_id It will select the element with id=”firstname” 1
* * { margin: 0; padding: 0;} It will select all elements 2
element p {color: gray} It will select all <p> elements 1
element,element div, p {color:gray} It will select all <div> elements and all <p> elements 1
element element div p {color: gray} It will select all <p> elements inside <div> elements 1
element>element div > p {color: gray} It will select all <p> elements where the parent is a <div> element 2
element+element div + p {color: gray} It will select all <p> elements that are placed immediately after <div> elements 2
element1~element2 p ~ ul {color: gray} It will select every <ul> element that are preceded by a <p> element 3
[attribute] [target] {color: gray} It will select all elements with a target attribute 2
[attribute=value] [target=_blank] {color: gray} It will select all elements with target=”_blank” 2
[attribute~=value] [title~=flower] {color: gray} It will select all elements with a title attribute containing the word “flower” 2
[attribute|=value] [lang|=en] {color: gray} It will select all elements with a lang attribute value starting with “en” 2
[attribute^=value] a[href^=”https”] {color: gray} It will select every <a> element whose href attribute value begins with “https” 3
[attribute$=value] a[href$=”.pdf”] {color: gray} It will select every <a> element whose href attribute value ends with “.pdf” 3
[attribute*=value] a[href*=”w3schools”] {color: gray} It will select every <a> element whose href attribute value contains the substring “w3schools” 3
:active a:active {color: gray} It will select the active link 1
::after p::after {color: gray} It will insert content after every <p> element 2
::before p::before {color: gray} It will insert content before the content of every <p> element 2
:checked input:checked {color: gray} It will select every checked <input> element 3
:disabled input:disabled {color: gray} It will select every disabled <input> element 3
:empty p:empty {color: #ccc} It will select every <p> element that has no children (including text nodes) 3
:enabled input:enabled {color: #ccc} It will select every enabled <input> element 3
:first-child p:first-child {color: #ccc} It will select every <p> element that is the first child of its parent 2
::first-letter p::first-letter {color: #ccc} It will select the first letter of every <p> element 1
::first-line p::first-line {color: #ccc} It will select the first line of every <p> element 1
:first-of-type p:first-of-type {color: #ccc} It will select every <p> element that is the first <p> element of its parent 3
:focus input:focus {color: #ccc} It will select the input element which has focus 2
:hover a:hover {color: #ccc} It will select links on mouse over 1
:in-range input:in-range {color: #ccc} It will select input elements with a value within a specified range 3
:invalid input:invalid {color: #ccc} It will select all input elemets with an invalid value 3
:lang(language) p:lang(it) {color: #ccc} It will select every <p> element with a lang attribute equal to “it” (Italian) 2
:last-child p:last-child {color: #ccc} It will select every <p> element that is the last child of its parent 3
:last-of-type p:last-of-type {color: #ccc} It will select every <p> element that is the last <p> element of its parent 3
:link a:link {color: #ccc} It will select all unvisited links 1
:not(selector) :not(p) {color: #ccc} It will select every element that is not a <p> element 3
:nth-child(n) p:nth-child(2) {color: #ccc} It will select every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) {color: #ccc} It will select every <p> element that is the second child of its parent, counting from the last child 3
:nth-last-of-type(n) p:nth-last-of-type(2) {color: #ccc} It will select every <p> element that is the second <p> element of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) {color: #ccc} It will select every <p> element that is the second <p> element of its parent 3
:only-of-type p:only-of-type {color: #ccc} It will select every <p> element that is the only <p> element of its parent 3
:only-child p:only-child {color: #ccc} It will select every <p> element that is the only child of its parent 3
:optional input:optional {color: #ccc} It will select input elements with no “required” attribute 3
:out-of-range input:out-of-range {color: #ccc} It will select input elements with a value outside a specified range 3
:read-only input:read-only {color: #ccc} It will select input elements with the “readonly” attribute specified 3
:read-write input:read-write {color: #ccc} It will select input elements with the “readonly” attribute NOT specified 3
:required input:required {color: #ccc} It will select input elements with the “required” attribute specified 3
:root :root {color: #ccc} It will select the document’s root element 3
::selection ::selection {color: #ccc} It will select the portion of an element that is selected by a user
:target #news:target {color: #ccc} It will select the current active #news element (clicked on a URL containing that anchor name) 3
:valid input:valid {color: #ccc} It will select all input elements with a valid value 3
:visited a:visited {color: #ccc} It will select all visited links 1

We have tried to use different kinds of styles to explain the CSS selectors more. See the code examples below for more understanding of the CSS selectors used in CSS.

* { margin: 0; padding: 0;}

#container * { border: 1px solid black;}

#container { width: 960px; margin: auto;}

.error { color: red;}

li a { text-decoration: none;}

a { color: red; }

ul { margin-left: 0; }

a:link { color: red; }

a:visted { color: purple; }

ul + p { color: red;}

div#container > ul { border: 1px solid black;}

ul ~ p { color: red;}

a[title] { color: green;}

a[href="<span class="skimlinks-unlinked">http://howtocode.pk</span>"] { color: #1f6053; }

The snippet above will style all anchor tags which link to http://howtocode.pk; they'll receive our branded green color. All other anchor tags will remain unaffected.

a[href*="tuts"] { color: #1f6053; }

a[href^="http"] { background: url(path/to/external/<span class="skimlinks-unlinked">icon.png</span>) no-repeat;   padding-left: 10px;}

a[href$=".jpg"] { color: red;}

a[data-filetype="image"] { color: red;}

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] { color: red;}

a[data-filetype="image"] { color: red;}

a[data-info~="external"] { color: red;}

a[data-info~="image"] { border: 1px solid black;}

a[data-info~="external"] { color: red;}

a[data-info~="image"] { border: 1px solid black;}

input[type=radio]:checked { border: 1px solid black;}

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}

.clearfix { *display: inline-block;_height: 1%;}

div:hover { background: #e3e3e3;}

div:not(#container) {color: blue;}

*:not(p) { color: green;}

p::first-line { font-weight: bold; font-size: 1.2em;}

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

p::first-line { font-weight: bold; font-size: 1.2em;}

li:nth-child(3) { color: red;}

li:nth-last-child(2) { color: red;}

ul:nth-of-type(3) { border: 1px solid black;}

ul:nth-last-of-type(3) { border: 1px solid black;}

ul li:first-child { border-top: none;}

ul > li:last-child { color: green;}

li:first-child { border-top: none;}

li:last-child { border-bottom: none;}

div p:only-child { color: red;}

li:only-of-type { font-weight: bold;}

ul > li:only-of-type { font-weight: bold;}

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

p + ul li:last-child { font-weight: bold;}

ul:first-of-type li:nth-last-child(1) { font-weight: bold;}

Comments