Home / Cheatsheets / #beginners / Ultimate CSS3 Selectors Cheat Sheet
135 Views
css cheat sheets

CSS Selectors

CSS selectors are utilized to select the content you need to style. In CSS Rule Set, Selectors are the part. CSS selectors select HTML elements as per their id, class, type, attribute, etc.

CSS selectors are divided into five categories:

  1. Simple/Basic selectors (select elements based on name, id, class)
  2. Combinator selectors (select elements based on a specific relationship between them)
  3. Pseudo-classes selectors (select elements based on a certain state)
  4. Pseudo-elements selectors (select and style a part of an element)
  5. Attribute selectors (select elements based on an attribute or attribute value)

Simple Selectors

Selector
Example
Example description
#id
#firstname
Selects the element with id=ā€firstnameā€
.class
.intro
Selects all elements with class=ā€introā€
element.class
p.intro
Selects onlyelements with class=ā€introā€
*
*
Selects all elements
element
p
Selects allelements
element,element,..
div, p
Selects all <div> elements and all <p> elements

Basic Selectors

Selector
Description
Example
element
TypeĀ selector. Matches an element.
p { color: red }
matches paragraphs
.class
Class selector. Matches the value of anclassattribute.
.warning { color: red }
matches elements containing class=ā€warningā€
#id
IDĀ selector. Matches the value of anĀ idĀ attribute.
#warning { color: red }
matches elements containing id=ā€warningā€
*
UniversalĀ selector. Matches everything.
* { color: red }
matches everything

Attribute selectors

Selector
Description
Example
[attribute]
Matches elements containing a given attribute.
a[href] {
color: red;
}
matches a elements with an href attribute
[attribute=ā€xā€]
Matches elements containing a given attribute with a given value.
a[href=ā€/x/ā€]
{color: red;}
matches a elements with the attribute and value href=ā€/x/ā€
[attribute~=ā€xā€]
Matches elements containing a given attribute with a value that contains a sub-value within a space-separated list.
abbr[title~=ā€xā€]
{ color: red;}
matches abbr elements with a title that contains ā€˜xā€™ (such as in title=ā€Cascading Style Sheetsā€)
[attribute|=ā€xā€]
Matches elements containing a given attribute with a value that contains a sub-value within a hyphen-separated list.
matches html elements with a lang attribute that contains ā€˜enā€™ (such as in lang=ā€en-gbā€)
[attribute^=ā€xā€]
Matches elements containing a given attribute with a value that starts with something.
a[href^=ā€http://ā€]
{color: red;}
matches a elements with an href attribute, the value of which begins with ā€˜http://ā€™
[attribute$=ā€xā€]
Matches elements containing a given attribute with a value that ends with something.
a[href$=ā€.comā€]
{color: red; }
matches a elements with an href attribute, the value of which ends with ā€˜.comā€™
[attribute*=ā€xā€]
Matches elements containing a given attribute with a value that contains something.
a[href*=ā€hdogā€]
{color: red;}
matches a elements with an href attribute, the value of which contains ā€˜hdogā€™

Pseudo-classes Selectors

Selector
Description
Example
:link
Matches aĀ link that has not been visited.
a:link { color: blue }
:visited
Matches aĀ link that has been visited.
a:visited { color: purple }
:active
Matches an element that is beingĀ activated, such as a link being clicked on.
a:active { color: red }
:hover
Matches an element whose box is beingĀ hovered overĀ by a cursor.
a:hover { text-decoration: none }
:focus
Matches an element that hasĀ focus, such as one that has been tabbed to.
a:focus { border: 1px solid yellow }
:target
Matches an element that has beenĀ linked to (via<a href=ā€#xā€ā€¦,for example).
h2:target { color: red }
matches a second-level heading that has been linked to
:lang()
Matches an element of a givenĀ language.
p:lang(fr) { color: red }
matches paragraphs that are declared, or otherwise considered, as French
:first-child
Matches theĀ first childĀ of an element.
p:first-child { color: red }
matches the first child, if it is a paragraph, of an element
:last-child
Matches theĀ last childĀ of an element.
div p:last-child { color: blue }
matches the last child, if it is a paragraph, of an element
:first-of-type
Matches theĀ first sibling of its typeĀ in an element.
li:first-of-type { color: red }
matches the first instance of a list item inside an element
:last-of-type
Matches theĀ last sibling of its typeĀ in an element.
li:last-of-type { color: blue }
matches the last instance of a list item inside an element
:nth-child()
Matches an element that is theĀ ordinal number childĀ of its parent.
p:nth-child(3) { color: red }
matches the third child, if it is a paragrpah, of an element
:nth-last-child()
Matches an element that is theĀ ordinal number child, in reverse order, of its parent.
p:nth-last-child(2) { color: blue }
matches the next-to-last child, if it is a paragraph, of an element
:nth-of-type()
Matches an element that is theĀ ordinal number sibling of its type.
li:nth-of-type(5) { color: red }
matches the fifth instance of a list item inside an element
:nth-last-of-type()
Matches an element that is the ordinal number sibling, in reverse order, of its type.
li:nth-of-type(5) { color: red }
matches the next-to-last instance of a list item inside an element
:only-child
Matches an element if it is theĀ only childĀ of its parent.
article p:only-child { color: red }
matches a paragraph if it is the only child of an article element
:only-of-type
Matches an element if it is theĀ only sibling of its type.
article aside:only-of-type { color: blue }
matches an aside element if it is the only aside element in an article element
:empty
Matches an element withĀ no children, or content.
td:empty { border-color: red }
matches table data cells with nothing in ā€™em
:root
Matches theĀ root elementĀ of a document. This will be theĀ htmlĀ element in HTML.
:root { background: yellow }
:enabled
MatchesĀ form control elements that are not disabled.
input:enabled { border-color: lime }
matches input elements that are not disabled
:disabled
MatchesĀ form control elements that are disabled.
input:enabled { border-color: red }
matches input elements that are disabled
:checked
Matches a radio or checkbox typeĀ input element that is checked.
input:checked { outline: 3px solid yellow }
matches checked input elements
:not()
NegotiationĀ pseudo-class. Matches an element that does not match a selector.
p:not(:first-child) { color: orange }
matches paragraphs that are not first children

Pseudo-elements Selectors

Selector
Description
Example
::first-line
Matches theĀ first textual lineĀ in an element.
p::first-line { font-weight: bold }
matches the first line in a paragraph
::first-letter
Matches theĀ first letterĀ in an element.
p::first-letter { font-size: 2em }
matches the first letter in a paragraph
::before
Used with theĀ contentĀ property to generate contentĀ beforeĀ the initial content of an element.
h1::before { content: ā€œ*ā€ }
places an asterisk at the start of a top-level heading
::after
Used with theĀ contentĀ property to generate contentĀ afterĀ the initial content of an element.
h1::after { content: ā€œ+ā€ }
places a plus-sign at the end of a top-level heading

Combinator Selectors

Selector
Description
Example
selector selector
DescendantĀ combinator. Matches elements that are descendants of another element.
aside p { color: red }
matches paragraphs inside elements containing class=ā€warningā€
selector > selector
ChildĀ combinator. Matches elements that are children of another element.
.warning > p { color: red }
matches paragraphs that are children of elements containing class=ā€warningā€
selector + selector
Adjacent siblingĀ combinator. Matches elements that immediately follow another element.
h1 + * { color: red }
matches the first element to follow a top-level heading
selector ~ selector
General siblingĀ combinator. Matches elements that follow another element.
h2 ~ p { color: red }
matches every paragraph that follows a second-level heading

CSS Group Selector

The grouping selector in CSS picks all the HTML elements with the same style definitions.

h1 { 
  text-align: center; 
  color: red; 
} 
h2 { 
  text-align: center; 
  color: red; 
} 
p { 
  text-align: center; 
  color: red; 
}

To minimize the code, just apply the CSS grouping selectors. Simply group the selectors by separating each selector with a comma. Letā€™s see the following code after CSS Grouping Selectors:

h1, h2, p { 
  text-align: center; 
  color: red; 
}

also, read  What are CSS Variables? and How to Use Them?


Post author

Hi, I am Adnan Ashraf from Okara Pakistan. I am a Content Writer, and SEO Expert.

  Tweet It