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>

selector	description
`[value]`	Elements with a value attribute.
`[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.

selector	description
`:lang()`	Select an element based on its content language.
`:any-link`	Matches all elements that match either :link or :visited
`:link`	Matches links that have not yet been visited.
`:visited`	Matches links that have been visited.
`:target`	Matches the element which is the target of the document URL.
`:scope`	Represents elements that are a reference point for selectors to match against.
`:hover`	Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.
`:active`	Matches when an item is being activated by the user, for example clicked on.
`:focus`	Matches when an element has focus.
`:focus-visible`	Matches when an element has focus and the user agent identifies that the element should be visibly focused.
`:focus-within`	Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.
`:autofill`	Matches when an has been autofilled by the browser.
`:enabled`	Represents a user interface element that is in an enabled state.
`:disabled`	Represents a user interface element that is in a disabled state.
`:read-only`	Represents any element that cannot be changed by the user.
`:read-write`	Represents any element that is user-editable.
`:placeholder-shown`	Matches an input element that is displaying placeholder text, for example from the HTML5 placeholder attribute.
`:default`	Matches one or more UI elements that are the default among a set of elements.
`:checked`	Matches when elements such as checkboxes and radiobuttons are toggled on.
`:indeterminate`	Matches when UI elements are in an indeterminate state.
`:valid`	Matches an element with valid contents. For example an input element with type 'email' which contains a validly formed email address.
`:invalid`	Matches an element with invalid contents. For example an input element with type 'email' with a name entered.
`:in-range`	Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.
`:out-of-range`	Applies to elements with range limitations, for example a slider control, when the selected value is outside the allowed range.
`:required`	Matches when a form element is required.
`:optional`	Matches when a form element is optional.
`:root`	Represents an element that is the root of the document. In HTML this is usually the element.
`:empty`	Represents an element with no children other than white-space characters.
`:nth-child()`	Uses An+B notation to select elements from a list of sibling elements.
`:nth-last-child()`	Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.
`:first-child`	Matches an element that is the first of its siblings.
`:last-child`	Matches an element that is the last of its siblings.
`:only-child`	Matches an element that has no siblings. For example a list item with no other list items in that list.
`: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.
`: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.
`:first-of-type`	Matches an element that is the first of its siblings, and also matches a certain type selector.
`:last-of-type`	Matches an element that is the last of its siblings, and also matches a certain type selector.
`:only-of-type`	Matches an element that has no siblings of the chosen type selector.
`:defined`	Represents any element that has been defined.
`:first`	Used with the @page at-rule, represents the first page of a printed document.
`:fullscreen`	Matches every element which is currently in full-screen mode.
`:host()`	Allows you to select a custom element from inside its shadow DOM.
`:host-context()`	Selects the shadow host of the shadow DOM containing the CSS it is used inside.
`:is()`	Selects any element that can be selected by one of the selectors in that list.
`:left`	Used with the @page at-rule, represents all left-hand pages of a printed document.
`:not()`	Represents elements that do not match a list of selectors.
`:right`	Used with the @page at-rule, represents all right-hand pages of a printed document.
`:where()`	Selects any element that can be selected by one of the selectors in that list.

Pseudo-elements

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

selector	description
`::after`	Creates a pseudo-element that is the last child of the selected element.
`::before`	Creates a pseudo-element that is the first child of the selected element.
`::backdrop`	A box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.
`::cue`	Matches WebVTT cues within a selected element.
`::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).
`::first-line`	Applies styles to the first line of a block-level element.
`::file-selector-button`	Represents the button of an of type="file"
`::marker`	Selects the marker box of a list item, which typically contains a bullet or number.
`::part()`	Represents any element within a shadow tree that has a matching part attribute.
`::placeholder`	Represents the placeholder text in an <input> or <textarea> element.
`::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).
`::slotted()`	Represents any element that has been placed into a slot inside an HTML template
`::scrollbar`	The style of an element's scrollbar.
`::scrollbar-button`	The buttons on the scrollbar ( arrows pointing upwards and downwards that scroll one line at a time ).
`::scrollbar-thumb`	The draggable scrolling handle.
`::scrollbar-track`	The track ( progress bar ) of the scrollbar, where there is a gray bar on top of a white bar.
`::scrollbar-track-piece`	The part of the track ( progress bar ) not covered by the handle.
`::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.
`::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.
`::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.
`::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.

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically