Introduction

CSS selectors identify specific HTML elements as targets for CSS styles. This topic covers how CSS selectors target HTML elements. Selectors use a wide range of over 50 selection methods offered by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.

Syntax

• #id
• .classname
• :pseudo-classname
• ::pseudo-elementname
• [attr] /* has the attr attribute. */
• [attr=”value”] /* has the attr attribute, and its value is exactly “value”. */
• [attr~=”value”] /* has the attr attribute, and its value, when split on whitespace, contains “value”. */
• [attr|=”value”] /* has the attr attribute, and its value is exactly “value”, or its value begins with “value**-**”. */
• [attr^=”value”] /* has the attr attribute, and its value begins with “value”. */
• [attr$=”value”] /* has the attr attribute, and its value ends with “value”. */
• [attr*=”value”] /* has the attr attribute, and its value contains “value”. */
• element-name
• *​

Remarks

• Sometimes you will see double colons (::) instead of just one (:). This is a way to separate pseudo-classes from pseudo-elements.
• Old browsers, like Internet Explorer 8, only support a single colon (:) for defining pseudo-elements.
• Unlike pseudo-classes, only one pseudo-element may be used per selector, if present it must appear after the sequence of simple selectors that represents the subjects of the selector (a future version of the W3C specification may allow multiple pseudo-elements per selector).