CSS Selectors

CSS selectors are a fundamental part of Cascading Style Sheets (CSS), a stylesheet language used for describing the presentation and formatting of web documents, such as HTML and XML. CSS selectors are used to target specific HTML elements within a web page, allowing you to apply styles (e.g., colors, fonts, margins, and more) to those elements.

Selectors work by selecting one or more HTML elements based on various criteria, like element types, attributes, and their hierarchical relationships within the document. Below you will find a list of CSS selectors.

Selector Example Example Description CSS
Universal * Styles all elements 2
.class .intro Styles all elements with class="intro" 1
#id #list Styles the element with id="list" 1
Type Selector ul Styles all <ul> elements 1
Selector list div, p Styles all <div> elements and all <p> elements 1
Descendant combinator div p Styles all <p> elements inside <div> elements 1
Child combinator (>) div > p Styles all <p> elements where the parent is a <div> element 2
Adjacent sibling combinator (+) div + p Styles all <p> elements that are placed immediately after <div> elements 2
General sibling combinator p ~ ul Styles every <ul> element that are preceded by a <p> element 3
[attribute] [target] Styles all elements with a target attribute 2
[attribute=value] [target=_blank] Styles all elements with target="_blank" 2
[attribute~=value] [title~=America] Styles all elements with a title attribute containing the word "America" 2
[attribute|=value] [lang|=en] Styles all elements with a lang attribute value starting with "en" 2
[attribute^=value] a[title^="A"] Styles every <a> element whose title attribute value begins with "A" 3
[attribute$=value] a[title$="ca"] Styles every <a> element whose title attribute value ends with "ca" 3
[attribute*=value] a[title*="America"] Styles every <a> element whose title attribute value contains the substring "America" 3