> For the complete documentation index, see [llms.txt](https://huy312100.gitbook.io/software-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huy312100.gitbook.io/software-development/front-end/basic/css/css-attribute-selector.md). # CSS \[attribute] Selector ### CSS \[attribute] Selector The `[attribute]` selector is used to select elements with a specified attribute. The following example selects all \ elements with a target attribute: ```html // Some code

CSS [attribute] Selector

The links with a target attribute gets a yellow background:

w3schools.com disney.com wikipedia.org ```
### CSS \[attribute="value"] Selector The `[attribute="value"]` selector is used to select elements with a specified attribute and value. The following example selects all \ elements with a target="\_blank" attribute: #### Example ```html // Some code a[target="_blank"] { background-color: yellow; } ``` ### 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 elements with a title attribute that contains a space-separated list of words, one of which is "flower": #### Example ``` // Some code [title~="flower"] { border: 5px solid yellow; } ``` The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers". ### CSS \[attribute|="value"] Selector The `[attribute|="value"]` selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). **Note:** The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text". #### Example ``` [class|="top"] { background: yellow; } ``` ### CSS \[attribute^="value"] Selector The `[attribute^="value"]` selector is used to select elements with the specified attribute, whose value starts with the specified value. The following example selects all elements with a class attribute value that starts with "top": **Note:** The value does not have to be a whole word! #### Example ``` [class^="top"] { background: yellow; } ``` ### CSS \[attribute$="value"] Selector The `[attribute$="value"]` selector is used to select elements whose attribute value ends with a specified value. The following example selects all elements with a class attribute value that ends with "test": **Note:** The value does not have to be a whole word! #### Example ``` // Some code [class$="test"] { background: yellow; } ``` ### CSS \[attribute\*="value"] Selector The `[attribute*="value"]` selector is used to select elements whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te": **Note:** The value does not have to be a whole word! #### Example ``` [class*="te"] { background: yellow; } ``` ### Styling Forms The attribute selectors can be useful for styling forms without class or ID: #### Example ```html input[type="text"] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="button"] { width: 120px; margin-left: 35px; display: block; ```