CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Attribute Selectors

An attribute selector selects the HTML elements that has a specific attribute or attribute with a specified value.


CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all anchor elements with a target attribute.

Run code

CSS [attribute=value] Selector

The [attribute=value] selector is used to select elements with the specified attribute and value.

Run code

CSS [attribute~=value] Selector

The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.

The following example selects all image elements with alt attribute containing the word "Parrot".

Run code

CSS [attribute|=value] Selector

The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

The following example selects all DIV elements with lang attribute value starting with "en".

Run code

CSS [attribute^=value] Selector

The [attribute^=value] selector is used to select elements with an attribute value begins with a specified value.

The following example selects all DIV elements with class attribute value begins with "pa".

Run code

CSS [attribute$=value] Selector

The [attribute$=value] selector is used to select elements with an attribute value ends with a specified value.

The following example selects all anchor elements with a href attribute ends with ".org".

Run code

CSS [attribute*=value] Selector

The [attribute*=value] selector is used to select elements whose attribute value containing a specified value.

The following example selects all anchor elements with a href attribute contains the value "example".

Run code

CSS Attribute Selectors

Below down is a list of all attribute selectors:

Selector Example Example description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [type=text] Selects all elements with type="text"
[attribute~=value] [title~=drone] Selects all elements with a title attribute containing the word "drone"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".org"] Selects every <a> element whose href attribute value ends with ".org"
[attribute*=value] a[href*="peanut"] Selects every <a> element whose href attribute value contains the substring "peanut"