# Element

Selects an element by its type.

p {
    color: red;
}
                    

Headline1

Paragraph

# .Class

Selects an element by the class attribute value, which may be reused multiple times per page.

.color_red {
    color: red;
}
                    

Headline1

Paragraph

# #ID

Selects an element by the id attribute value, which is unique and to only be used once per page.

#paragraph {
    color: red;
}
                    

Headline1

Paragraph

# Descendant

Selects an element that resides anywhere within an identified ancestor element.

.container p {
    color: red;
    padding-left: 36px;
}
                    

Headline1

Paragraph

Container

Paragraph

# Direct > Child

Selects an element that resides immediately inside an identified parent element.

.container > p {
    color: red;
    padding-left: 36px;
}
                    

Headline1

Paragraph

Container

Paragraph

# General ~ Sibling

Selects an element that resides immediately inside an identified parent element.

h1 ~ p {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# Adjacent + Sibling

Selects an element that follows directly after the prior element, in which both elements share the same parent.

h1 + p {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# [Attribute Present]

Selects an element if the given attribute is present.

a[target] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# [Attribute="Equals"]

Selects an element if the given attribute value exactly matches the value stated.

a[href="./Selectors.html#selectorAttributePresent"] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# [Attribute*="Contains"]

Selects an element if the given attribute value contains at least once instance of the value stated.

a[href*="Attribute"] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# [Attribute^="BeginsWith"]

Selects an element if the given attribute value begins with the value stated.

a[href^="./Select"] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# [Attribute$="EndsWith"]

Selects an element if the given attribute value ends with the value stated.

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

Paragraph

Headline1

Link

Paragraph

# [Attribute~="Spaced Value"]

Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated.

a[name~="spaced"] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# [Attribute|="Hyphenated-Value"]

Selects an element if the given attribute value is hyphen-separated and begins with the word stated.

a[name|="hyphenated"] {
    color: red;
}
                    

Paragraph

Headline1

Link

Paragraph

# :hover

Selects an element when a user has hovered their cursor over it.

p:hover {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :active

Selects an element when a user has engaged it.

h1:active {
    color: red;
    user-select: none;
}
                    

Headline1

# :focus

Selects an element when a user has engaged it.

input:focus {
    color: red;
}
                    

# :enabled

Selects an element in the default enabled state.

input:enabled {
    color: red;
    margin-bottom: 8px;
}
                    

# :disabled

Selects an element in the disabled state, by way of the disabled attribute.

input:disabled {
    color: red;
    margin-top: 8px;
}
                    

# :checked

Selects a checkbox or radio button that has been checked.

input:checked + label {
    color: red;
}
                    

Check me!

# :first-child

Selects an element that is the first within a parent.

.container :first-child {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :last-child

Selects an element that is the last within a parent.

.container :last-child {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :first-of-type

Selects an element that is the first of its type within a parent.

.container :first-of-type {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :last-of-type

Selects an element that is the last of its type within a parent.

.container :last-of-type {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :nth-child()

Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree.

.container :nth-child(2n+1) {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

Headline1

# :nth-last-child()

Selects an element that matches the given number or expression, counting all elements from the end of the document tree.

.container :nth-last-child(2n+1) {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

Headline1

# :nth-of-type()

Selects an element that matches the given number or expression, counting only elements of its type from the beginning of the document tree.

.container :nth-of-type(2) {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :nth-last-of-type()

Selects an element that matches the given number or expression, counting only elements of its type from the end of the document tree.

.container :nth-last-of-type(2) {
    color: red;
}
                    

Paragraph

Headline1

Paragraph

# :target

Selects an element whose ID attribute value matches that of the URI fragment identifier.

p:target {
    color: red;
}
                    

Headline1

Click me!

# :not()

Selects an element not represented by the stated argument.

p:not(.not_example) {
    color: red;
}
                    

Paragraph

# :root

Selects the highest-level parent element in the DOM.

:root {
    color: red;
}
                    

# :before

Creates a pseudo-element inside the selected element at the beginning.

h1:before {
    content: '*';
    color: red;
}
                    

Headline1

# :after

Creates a pseudo-element inside the selected element at the end.

h1:after {
    content: '*';
    color: red;
}
                    

Headline1

# ::selection

Selects the part of a document which has been selected by the user.

p::selection {
    color: red;
}
                    

Select This text

CSS - Selectors

Selectors

Selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style.

Basic Selectors

# Element

Headline1

# .Class

Headline1

# #ID

Headline1

Child Selectors

# Descendant

Headline1

# Direct > Child

Headline1

Sibling Selectors

# General ~ Sibling

Headline1

# Adjacent + Sibling

Headline1

Attribute Selectors

# [Attribute Present]

Headline1

# [Attribute="Equals"]

Headline1

# [Attribute*="Contains"]

Headline1

# [Attribute^="BeginsWith"]

Headline1

# [Attribute$="EndsWith"]

Headline1

# [Attribute~="Spaced Value"]

Headline1

# [Attribute|="Hyphenated-Value"]

Headline1

Pseudo Classes

# :hover

Headline1

# :active

Headline1

# :focus

# :enabled

# :disabled

# :checked

# :first-child

Headline1

Headline1

# :last-child

Headline1

Headline1

# :first-of-type

Headline1

Headline1

# :last-of-type

Headline1

Headline1

# :nth-child()

Headline1

Headline1

Headline1

# :nth-last-child()

Headline1

Headline1

Headline1

# :nth-of-type()

Headline1

Headline1

# :nth-last-of-type()

Headline1

Headline1

# :target

Headline1

# :not()

# :root

Pseudo Elements

# :before

Headline1

# :after

Headline1

# ::selection