March 1Mar 1 Administrators CSS Attribute Selectors CSS Attribute Selectors CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both. Example Select all <a> elements with a target attribute: a[target] { background-color: yellow;} Try it Yourself » Basic Attribute Selectors Basic attribute selectors match elements that have a specific attribute or a specific attribute value. CSS [attribute] Selector The [attribute] selector is used to select elements with a specific attribute. The following example selects all <a> elements with a target attribute: Example a[target] { background-color: yellow;} Try it Yourself » CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specific attribute with an exact value. The following example selects all <a> elements with a target="_blank" attribute: Example a[target="_blank"] { background-color: yellow;} Try it Yourself » CSS [attribute~="value"] Selector The [attribute~="value"] selector is used to select elements with an attribute value containing a specific 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 [title~="flower"] { border: 5px solid yellow;} Try it Yourself » 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 specific attribute, whose value can be exactly the specific value, or start with the specific 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;} Try it Yourself » ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.