CSS Selectors

Datetime:2016-08-23 03:04:28          Topic: CSS           Share

A reference of CSS selectors. This includes new selectors from CSS Selectors Level 3 (CSS3):

Universal Selector: *

Selects everything.

Root Element Selector: :root

Selects the root element. All elements are descendants of the root element, and it almost always references the <html> element.

Type Selector: h2

Selects all elements of the type.

ID selector: #myEl

Selects the element with the provided ID.

Class selector: .btn-xl

Selects all elements with the provided class.

Attribute selectors

Simple Attribute Selector: [target]

Selects elements that have the provided attribute.

Attribute & Value Selector: [target=”_blank”]

Selects elements that have the provided attribute and value.

Attribute & One of Many Values: [class~=”large”]

Selects elements if the value is part of a white-space separated list of values.

Attribute & Beginning of a Value: [target^=”_b”]

Selects elements who’s value for an attribute starts with the provided string.

Attribute & End of a Value: [target$=”nk”]

Selects elements who’s value for an attribute ends with the provided string.

Attribute & Part of a Value: [target*=”lan”]

Selects elements who’s value for an attribute contains the substring provided.

Attribute & Part of a Hyphen-Separated List of Values: [lang|=”zu”]

Selects elements if the value is the left part in a hyphen-separated list.

Descendant Selector: h2 span

Selects the element(s) provided on the right if it’s a descendant of the element on the left.

Child Selector: div > p

Selects the element(s) provided on the right if it’s a direct child of the element on the left.

Adjacent Sibling Selector: div + p

Selects the element provided on the right if it’s immediately preceded by the element on the left.

General Sibling Selector: div ~ p

Selects the element provided on the right if it’s preceded by the element on the left.

Negation Selector: :not(.first-par)

Selects elements that don’t match the simple selector provided in parenthesis.

Pseudo-Elements

::before Pseudo-Element: p::before

Generated content before the element.

::after Pseudo-Element: p::after

Generated content after the element.

::first-letter Pseudo-Element: p::first-letter

The first letter of the element.

::first-line Pseudo-Element: p::first-line

The first line of the element.

Structural Pseudo-Classes

nth-child(n): span:nth-child(5)

Selects the n-th sibling if it’s the provided type.

nth-last-child(n): p:nth-last-child(4)

Counting from the last child, selects the n-th sibling if it’s the provided type.

nth-of-type(n): span:nth-of-type(2)

Selects the n-th sibling, only counting the same type.

nth-last-of-type(n): span:nth-last-of-type(3)

Counting from the last child and only counting the provided type, selects the n-th sibling.

first-child: span:first-child

Selects the first of child of the parent if it matches the provided type of element.

last-child: span:last-child

Selects the last of child of the parent if it matches the provided type of element.

first-of-type: span:first-of-type

Selects the first of the provided type within a parent.

last-of-type: span:last-of-type

Selects the last of the provided type within a parent.

only-child: span:only-child

Selects the element if it’s the only child of the parent element.

only-of-type: span:only-of-type

Selects the element if it’s the only one of its type inside the parent element.

empty: div:empty

Selects elements with no children.

Link Pseudo-Classes

Link: a:link

A link that hasn’t been visited. The starting point for links

Visited: a:visited

A link that has been visited.

User Action Pseudo-Classes

Active: a:active

When the element is active.

Hover: a:hover

When the user’s pointing device is on top of the element.

Focus: a:focus

When the element has the focus. For example, when the user clicks inside an input field, the field has the focus.

Target Pseudo-Class: p:target

Selected when the element on the left is the current target as defined by the url.

lang Pseudo-Class: :lang(en)

Element(s) with the specified lang attribute.

UI States Pseudo-Classes

Enabled: input:enabled

When the element(s) on the left is enabled.

Disabled: input:disabled

When the element(s) on the left is disabled.

Checked: input:checked

When the element(s) on the left is checked. Associated with the inputs of type radio or checkbox.

Remember that to target multiple selectors in one CSS declaration you use a comma between each selector. The following example selects all <p> elements that don’t have the article-par class and also selects all <h2> elements:

p:not(.article-par), h2 {
  font-weight: bold;
}

Also, if you want to select an element while targeting a combination of multiple classes and/or ID, you’ll simple note the multiple classes and/or ID without using a space between them. For example, if you want to select and element that has the btn and btn-large classes:

.btn.btn-large {
  font-weight: bold;
}

In the above example, you don’t want your selector to be .btn .btn-large , because then it would select .btn-large elements that are descendants of .btn elements.

Now say that the element you want to select also has an ID of #main-btn :

#main-btn.btn.btn-large {
  font-weight: bold;
}




About List