Css element selector list

Selector list

The CSS selector list ( , ) selects all the matching nodes. A selector list is a comma-separated list of selectors.

Description

When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. Selector lists can also be passed as parameters to some functional CSS pseudo-classes. White space may appear before and/or after the comma.

The following three declarations are equivalent:

span  border: red 2px solid; > div  border: red 2px solid; > 

span, div  border: red 2px solid; > 

:is(span, div)  border: red 2px solid; > 

Examples

When applying the same styles to elements matching different criteria, grouping the selectors in a comma-separated list can improve consistency while reducing the size of style sheets.

Single line grouping

This example shows grouping selectors in a single line using a comma-separated list.

h1, h2, h3, h4, h5, h6  font-family: helvetica; > 

Multi line grouping

This example shows grouping selectors in multiple lines using a comma-separated list.

#main, .content, article, h1 + p  font-size: 1.1em; > 

Valid and invalid selector lists

An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the :is() and :where() pseudo-classes that accept forgiving selector lists.

Invalid selector list

A downside to using a selector list is that a single unsupported selector in the selector list invalidates the entire rule.

Consider the following two CSS rule sets:

h1  font-family: sans-serif; > h2:invalid-pseudo  font-family: sans-serif; > h3  font-family: sans-serif; > 

h1, h2:invalid-pseudo, h3  font-family: sans-serif; > 

They are not equivalent. In the first rule set, styles will be applied on the h1 and h3 elements, but the h2:invalid-pseudo rule will not be parsed. In the second rule set, because one selector in the list is invalid, the entire rule will not be parsed. Because of this, no style will be applied to the h1 and h3 elements as when any selector in a list of selectors in invalid, the entire style block will be ignored.

Forgiving selector list

A way to remedy the invalid selector list problem is to use the :is() or the :where() pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used.

Carrying on from the previous example, the following two CSS rule sets are now equivalent:

h1  font-family: sans-serif; > h2:maybe-unsupported  font-family: sans-serif; > h3  font-family: sans-serif; > 

:is(h1, h2:maybe-unsupported, h3)  font-family: sans-serif; > 

The difference between the two is that the specificity of :is() is its most specific argument, whereas the :where() selector and the forgiving selector list parameter do not add any specificity weight.

Relative selector list

A relative selector list is a comma-separated selector list parsed as relative selectors, which begin with an explicit or implied combinator.

h2:has(+ p, + ul.red)  font-style: italic; > 

In the above example, the italic style will be applied to any h2 heading that is immediately followed by

or . Note that pseudo-elements and the :has() selector are not valid within the :has() relative selector list.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The :is() and :where() pseudo-classes accept forgiving selector lists.
• The :not() pseudo-class accepts a regular selector list
• The :has() pseudo-class accepts a relative selector list.
• CSS selectors

Found a content problem with this page?

This page was last modified on Jul 22, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Selectors — Full List

Full list of CSS selectors, includes Selectors Level 3 and Selectors Level 4.

At writing, Level 4 is in draft status and many of the new selectors have limited support in browsers.

This list is also available grouped by category and by specification, where you can find examples of each selector.

Selects an E element whose foo attribute value is exactly equal to bar , regardless of its case. Basically, using i allows you to specify «case-sensitive» when specifying the value.

So for example, Text , text , and TEXT will all be selected if i is specified.

Selects an E element being the source anchor of a hyperlink.

This is the equivalent of using both the :link and :visited pseudo-classes.

Selects an E element being the target of the referring URL.

Selects an E element that is currently presented in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the current item as it is being read out.

Selects an E element that is in the past in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have already been read out.

Select an E element that is in the future in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have yet to be read out.

Selects an E element that can possibly receive a drop.

For example, in HTML you can specify a drop target with the dropzone attribute. This selector can be used style those elements while the user is dragging another element to be dropped.

Selects an E element that is the current drop target for the item being dragged.

In other words, if the user were to release the drag, the element would be dropped on to this drop target.

Selects an E element that could receive the item currently being dragged. It only matches if the drop target is valid for the object currently being dragged.

For example, the HTML dropzone attribute can be used to specify which types of files can be dropped onto an element.

Selects a user interface element E that is user alterable.

For example, an HTML input element that is not disabled and not readonly is :read-write . Also, any HTML element with contenteditable attribute set to the true state is also :read-write .

Selects a user interface element E that is not user alterable.

For example, an HTML input element that is disabled or readonly is :read-only .

Selects an input control currently showing placeholder text.

This allows you to style the placeholder text. For example, change its color, etc.

Selects a user interface element E that is the default item in a group of related choices.

For example, it could select the initially selected option element in a select element, or the default button in the form, etc.

Selects a user interface element E that is checked/selected (for example, a radio-button or checkbox).

Can be used to style the element’s label.

Selects a user interface element E that is in an indeterminate state (neither checked nor unchecked).

Can be used to style the element’s label.

Selects a user-input element E that meets its data validity semantics.

Selects a user-input element E that doesn’t meet its data validity semantics.

Selects a user-input element E whose value is in-range.

Selects a user-input element E whose value is out-of-range.

Selects a user-input element E that requires input.

For example, a form element with the required attribute.

Selects a user-input element E that does not require input.

For example, a form element without the required attribute.

Selects an E element, root of the document.

In most cases, when using HTML this will match the html element, however, this may not always be the case if using another language such as SVG or XML.

Selects an E element that has no content except maybe white space.

Similar to :empty , however, :blank will also select elements that contain white space (which :empty will not).

Selects an F element descendant of an E element.

Note that this selector does the same thing as the previous selector ( E F ). This selector was introduced in CSS Selectors Level 4 to give the descendant combinator a visible, non-whitespace form and to bridge the gap between the child combinator (>) and the shadow-piercing descendant combinator (>>>)

Источник

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity . The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList .

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Reference

Combinators and seperators

Selectors

Terms

• Pseudo-class glossary term
• Functional pseudo-classes
• Combinators
• Simple selector
• Compound selector
• Complex selector
• Relative selector
• Selector list
• Specificity

Guides

Overview of the different types of simple selectors and various combinators defined in the CSS selectors and the CSS pseudo modules.

Explanation of the structure of CSS selectors and the terminologies introduced in the CSS selectors module, ranging from «simple selector» to «forgiving relative selector list».

Lists the pseudo-classes, selectors that allow the selection of elements based on state information that is not contained in the document tree, defined in the various CSS modules and HTML.

Learn how to use the :target pseudo-class to style the target element a URL’s fragment identifier.

Learn the different UI pseudo-classes available for styling forms in different states.

The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.

Related concepts

• :popover-open pseudo-class
• CSS scoping module
  • :host pseudo-class
  • :host() pseudo-class
  • :host-context() pseudo-class
  • ::slotted pseudo-element
  • ::after
  • ::before
  • ::file-selector-button
  • ::first-letter
  • ::first-line
  • ::grammar-error
  • ::marker
  • ::placeholder
  • ::selection
  • ::spelling-error
  • ::target-text
  • ::part pseudo-element
  • ::backdrop
  • ::cue
  • ::cue-region

  Specifications

  See also

  Found a content problem with this page?

  This page was last modified on Jul 21, 2023 by MDN contributors.

  Your blueprint for a better internet.

  Источник

  Читайте также:  Checkbox styling with css