HTML and CSS Reference
In-Depth Information
CSS3 ATTRIBUTE SELECTORS
CSS3 extends the basic attribute selector functionality by allowing you to select
elements based on strings within attribute values. For example, you could select
and style <img src=”alert.gif”> using the following:
img[src^=”alert”] {
border: 1px solid #000000;
}
The ^ character dictates that this selector should select <img> elements only if
they have the string 'alert' at the start of the src attribute value.
<img src=”alert.gif”> could also be styled like this:
img[src$=”gif”] {
border: 1px solid #000000;
}
The $ character dictates that this selector should select <img> elements only
if they have the string 'gif' at the end of the src attribute value. This is really
useful for styling links that point to specific types of resources: You could perhaps
add specific icons to different links depending on whether they link to PDFs, Word
documents, and so forth.
Yo u c o u l d a l s o s t y l e <img src=”alert.gif”> like this:
img[src*=”ert”] {
border: 1px solid #000000;
}
The * character dictates that <img> elements with the string 'ert' anywhere
within the src attribute will be selected.
 
Search WWH ::




Custom Search