Things You'll Need:
- A text editor or CSS editing tool
-
Step 1
An attribute selector will target a specific element if the selector matches the element or if some specified attribute condition is met. Attribute selector values are given in square brackets, [like this]. If you write an attribute selector rule where the selector matches the element, it might look like this image.
-
Step 2
The selector in Step 1 targets any IMG element with a TITLE attribute. It doesn’t matter what the content of that title attribute is; it only matters that the element has a title attribute.
-
Step 3
You can get more specific than that with an attribute selector using the syntax [att=val]. With this syntax, the attribute targeted must have a specific value. Suppose for example, that you want to create a style for images that have the exact TITLE attribute “mybunny.” Now the TITLE attribute alone is not enough; the VALUE must match exactly as well.
-
Step 4
Another type of attribute selector uses a tilde-equals sign combination like this [att~=val]. With this selector you can match any element that has a particular value among a list of space separated values. For example, suppose you have an h3 element on your page with a space separated list of class attributes including "bulletin warning," like this image shows.
-
Step 5
This CSS attribute selector
h3[class~="warning"]{
some rules here;
}
would target the h3 element shown in the image in Step 4 with the space separated list of attributes. It only has to match one of the items on the list. -
Step 6
The final type of attribute selector uses syntax combining the pipe character (the pipe is the straight vertical bar on the key above the Enter key which you type using the Shift key) and an equal sign. See the rule in the image for an example of a pipe followed by an equal sign. This syntax matches hyphenated elements. This most often is used in rules targeting specific language declarations where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is shown in the image. That rule would match any LANG attribute that had “en” among a hyphen-separated list of language values.
