References

Selectors

CSS selectors define the elements to which a set of CSS rules apply.

Basic usage

Universal selector

Selects all elements. The CSS universal selector * matches elements of any type.

<body class="box:border_*">...</body>

Class selector

Selects all elements that have the given class attribute.

<div class="text:center.class">...</div>

ID selector

Selects an element based on the value of its id attribute.

<div class="text:center#id">...</div>

Attribute selector

Selects all elements that have the given attribute.

<div class="text:center[attribute]">...</div>
selectordescription
[value]

Elements with a value attribute.

Can I use ?Can I use ?
[attr=value]

Elements with an attr matching value.

[attr~=value]

Elements whose class attribute contains value.

[attr|=value]

Elements with an attr matching value or value-.

[attr^=value]

Elements with an attr prefixed value

[attr$=value]

Elements with an attr ending value.

[attr*=value]

Elements with an attr containing value.


Descendant Combinator

The _ combinator selects nodes that are descendants of the first element.

<div class="text:center_selector2">...</div>

Child Combinator

The > combinator selects nodes that are direct children of the first element.

<div class="text:center>selector2">...</div>

General Sibling Combinator

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

<div class="text:center~selector2">...</div>

Adjacent Sibling Combinator

The + combinator matches the second element only if it immediately follows the first element.

<div class="text:center+selector2">...</div>

References

Pseudo-classes

The : pseudo allow the selection of elements based on state information that is not contained in the document tree.

selectordescription
:lang()

Select an element based on its content language.

Can I use ?Can I use ?
:any-link

Matches all elements that match either :link or :visited

Can I use ?Can I use ?
:link

Matches links that have not yet been visited.

Can I use ?Can I use ?
:visited

Matches links that have been visited.

Can I use ?Can I use ?
:target

Matches the element which is the target of the document URL.

Can I use ?Can I use ?
:scope

Represents elements that are a reference point for selectors to match against.

Can I use ?Can I use ?
:hover

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

Can I use ?Can I use ?
:active

Matches when an item is being activated by the user, for example clicked on.

Can I use ?Can I use ?
:focus

Matches when an element has focus.

Can I use ?Can I use ?
:focus-visible

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

Can I use ?Can I use ?
:focus-within

Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Can I use ?Can I use ?
:autofill

Matches when an has been autofilled by the browser.

Can I use ?Can I use ?
:enabled

Represents a user interface element that is in an enabled state.

Can I use ?Can I use ?
:disabled

Represents a user interface element that is in a disabled state.

Can I use ?Can I use ?
:read-only

Represents any element that cannot be changed by the user.

Can I use ?Can I use ?
:read-write

Represents any element that is user-editable.

Can I use ?Can I use ?
:placeholder-shown

Matches an input element that is displaying placeholder text, for example from the HTML5 placeholder attribute.

Can I use ?Can I use ?
:default

Matches one or more UI elements that are the default among a set of elements.

Can I use ?Can I use ?
:checked

Matches when elements such as checkboxes and radiobuttons are toggled on.

Can I use ?Can I use ?
:indeterminate

Matches when UI elements are in an indeterminate state.

Can I use ?Can I use ?
:valid

Matches an element with valid contents. For example an input element with type 'email' which contains a validly formed email address.

Can I use ?Can I use ?
:invalid

Matches an element with invalid contents. For example an input element with type 'email' with a name entered.

Can I use ?Can I use ?
:in-range

Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.

Can I use ?Can I use ?
:out-of-range

Applies to elements with range limitations, for example a slider control, when the selected value is outside the allowed range.

Can I use ?Can I use ?
:required

Matches when a form element is required.

Can I use ?Can I use ?
:optional

Matches when a form element is optional.

Can I use ?Can I use ?
:root

Represents an element that is the root of the document. In HTML this is usually the element.

Can I use ?Can I use ?
:empty

Represents an element with no children other than white-space characters.

Can I use ?Can I use ?
:nth-child()

Uses An+B notation to select elements from a list of sibling elements.

Can I use ?Can I use ?
:nth-last-child()

Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.

Can I use ?Can I use ?
:first-child

Matches an element that is the first of its siblings.

Can I use ?Can I use ?
:last-child

Matches an element that is the last of its siblings.

Can I use ?Can I use ?
:only-child

Matches an element that has no siblings. For example a list item with no other list items in that list.

Can I use ?Can I use ?
:nth-of-type()

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

Can I use ?Can I use ?
:nth-last-of-type()

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

Can I use ?Can I use ?
:first-of-type

Matches an element that is the first of its siblings, and also matches a certain type selector.

Can I use ?Can I use ?
:last-of-type

Matches an element that is the last of its siblings, and also matches a certain type selector.

Can I use ?Can I use ?
:only-of-type

Matches an element that has no siblings of the chosen type selector.

Can I use ?Can I use ?
:defined

Represents any element that has been defined.

Can I use ?Can I use ?
:first

Used with the @page at-rule, represents the first page of a printed document.

Can I use ?Can I use ?
:fullscreen

Matches every element which is currently in full-screen mode.

Can I use ?Can I use ?
:host()

Allows you to select a custom element from inside its shadow DOM.

Can I use ?Can I use ?
:host-context()

Selects the shadow host of the shadow DOM containing the CSS it is used inside.

Can I use ?Can I use ?
:is()

Selects any element that can be selected by one of the selectors in that list.

Can I use ?Can I use ?
:left

Used with the @page at-rule, represents all left-hand pages of a printed document.

Can I use ?Can I use ?
:not()

Represents elements that do not match a list of selectors.

Can I use ?Can I use ?
:right

Used with the @page at-rule, represents all right-hand pages of a printed document.

Can I use ?Can I use ?
:where()

Selects any element that can be selected by one of the selectors in that list.

Can I use ?Can I use ?

Pseudo-elements

The :: pseudo represent entities that are not included in HTML.

selectordescription
::after

Creates a pseudo-element that is the last child of the selected element.

Can I use ?Can I use ?
::before

Creates a pseudo-element that is the first child of the selected element.

Can I use ?Can I use ?
::backdrop

A box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.

Can I use ?Can I use ?
::cue

Matches WebVTT cues within a selected element.

Can I use ?Can I use ?
::first-letter

Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Can I use ?Can I use ?
::first-line

Applies styles to the first line of a block-level element.

Can I use ?Can I use ?
::file-selector-button

Represents the button of an of type="file"

Can I use ?Can I use ?
::marker

Selects the marker box of a list item, which typically contains a bullet or number.

Can I use ?Can I use ?
::part()

Represents any element within a shadow tree that has a matching part attribute.

Can I use ?Can I use ?
::placeholder

Represents the placeholder text in an <input> or <textarea> element.

Can I use ?Can I use ?
::selection

Applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Can I use ?Can I use ?
::slotted()

Represents any element that has been placed into a slot inside an HTML template

Can I use ?Can I use ?
::scrollbar

The style of an element's scrollbar.

Can I use ?Can I use ?
::scrollbar-button

The buttons on the scrollbar ( arrows pointing upwards and downwards that scroll one line at a time ).

Can I use ?Can I use ?
::scrollbar-thumb

The draggable scrolling handle.

Can I use ?Can I use ?
::scrollbar-track

The track ( progress bar ) of the scrollbar, where there is a gray bar on top of a white bar.

Can I use ?Can I use ?
::scrollbar-track-piece

The part of the track ( progress bar ) not covered by the handle.

Can I use ?Can I use ?
::scrollbar-corner

The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.

Can I use ?Can I use ?
::resizer

The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet This is often the bottom-right corner of the browser window.

Can I use ?Can I use ?
::search-cancel-button

A button ( The "cancel button" ) at the edge of an of type="search" which clears away the current value of the element.

Can I use ?Can I use ?
::search-results-button

A button ( The "search results button" ) at the left edge of an of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.

Can I use ?Can I use ?


© Aoyue Design LLC.
關於此頁的問題
編輯自AronLola