css attribute selectors

extern-link.css

CSS 2
5.8.1 Matching attributes and attribute values
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Attribute selectors may match in four ways:

[att]
Match when the element sets the "att" attribute, 
whatever the value of the attribute.

[att=val]
Match when the element's "att" attribute value is exactly "val".

[att~=val]
Represents an element with the att attribute whose value is a 
white space-separated list of words, one of which is exactly "val". 
If "val" contains white space, it will never represent anything 
(since the words are separated by spaces). If "val" is the empty 
string, it will never represent anything either.

[att|=val]
Represents an element with the att attribute, its value either 
being exactly "val" or beginning with "val" immediately followed 
by "-" (U+002D). This is primarily intended to allow language 
subcode matches (e.g., the hreflang attribute on the a element 
in HTML) as described in BCP 47 ([BCP47]) or its successor. 
For lang (or xml:lang) language subcode matching, please 
see the :lang pseudo-class.


/* */

<a href="http://d.de" rel="name">link</a>

a[rel]{

}

/* */

<a href="http://d.de" rel="extern">link</a>

a[rel="extern"]{
	background: url(../pic/extern.png) no-repeat 0 3px;
	padding-left: 18px;
}



/* attribute is within space separated list */

<a href="http://d.de" rel="link extern new">link</a>
<a href="http://d.de" rel="extern">link</a>

a[rel~="extern"]:link{
	background: url(../pic/extern.png) no-repeat 0 3px;
	padding-left: 18px;
}


/* attribute is within dash separated list */

<a href="http://d.de" rel="first-new-extern-old">link</a>


a[rel|="extern"]:link{
	background: url(../pic/extern.png) no-repeat 0 3px;
	padding-left: 18px;
}





CSS 3
6.3.2. Substring matching attribute selectors
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#attribute-selectors



Three additional attribute selectors are provided for matching 
substrings in the value of an attribute:

[att^=val]
Represents an element with the att attribute whose value begins 
with the prefix "val". If "val" is the empty string then the 
selector does not represent anything.
[att$=val]
Represents an element with the att attribute whose value ends with 
the suffix "val". If "val" is the empty string then the selector 
does not represent anything.
[att*=val]
Represents an element with the att attribute whose value contains 
at least one instance of the substring "val". If "val" is the 
empty string then the selector does not represent anything.





/* attribute begins with a certain value */

a[href ^="http://"]:hover{
	background: url(../pic/extern_on.png) no-repeat 0 3px;
	padding-left: 18px;
}


/* attribute ends with a certain value */

a[href $=".pdf"]:hover{
	background: url(../pic/pdf.png) no-repeat 0 3px;
	padding-left: 18px;
}



/*  For example, "*=" means "match the following value anywhere in the attribute value." */

<a href="frist_middle_last_name.txt">link</a>

a[href *="middle"]:link{
	background: url(../pic/m.png) no-repeat 0 3px;
	padding-left: 18px;
}



///


a:not([href^="http://www.example.be"]):not([href^="#"]):not([href^="/"]):after {
content:"\279F";
}


http://css-tricks.com/attribute-selectors/

gistfile2.txt

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	
E	an element of type E	
E[foo]	an E element with a "foo" attribute	
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	

E[foo~="bar"]	an E element whose "foo" attribute value is a list of 
whitespace-separated values, one of which is exactly equal to "bar"	

E[foo^="bar"]	an E element whose "foo" attribute value begins exactly 
with the string "bar"	Attribute selectors	3

E[foo$="bar"]	an E element whose "foo" attribute value ends exactly 
with the string "bar"	Attribute selectors	3

E[foo*="bar"]	an E element whose "foo" attribute value contains the 
substring "bar"	Attribute selectors	3

E[foo|="en"]	an E element whose "foo" attribute has a hyphen-separated 
list of values beginning (from the left) with "en"	Attribute selectors	2

E:root	an E element, root of the document	Structural pseudo-classes	3

E:nth-child(n)	an E element, the n-th child of its parent	
Structural pseudo-classes	3

E:nth-last-child(n)	an E element, the n-th child of its parent, 
counting from the last one	Structural pseudo-classes	3

E:nth-of-type(n)	an E element, the n-th sibling of its type	
Structural pseudo-classes	3

E:nth-last-of-type(n)	an E element, the n-th sibling of its type, 
counting from the last one	Structural pseudo-classes	3

E:first-child	an E element, first child of its parent	Structural 
pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural
pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	
Structural pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	
Structural pseudo-classes	3
E:only-child	an E element, only child of its parent	
Structural pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	
Structural pseudo-classes	3
E:empty	an E element that has no children (including text nodes)	
Structural pseudo-classes	3
E:link
E:visited	an E element being the source anchor of a hyperlink 
of which the target is not yet visited (:link) or already visited 
(:visited)	The link pseudo-classes	1
E:active
E:hover
E:focus	an E element during certain user actions	
The user action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	
The target pseudo-class	3
E:lang(fr)	an element of type E in language "fr" 
(the document language specifies how language is determined)
	The :lang() pseudo-class	2
E:enabled
E:disabled	a user interface element E which is enabled or
 disabled	The UI element states pseudo-classes	3
E:checked	a user interface element E which is checked 
(for instance a radio-button or checkbox)	
The UI element states pseudo-classes	3
E::first-line	the first formatted line of an E element	
The ::first-line pseudo-element	1
E::first-letter	the first formatted letter of an E element	
The ::first-letter pseudo-element	1
E::before	generated content before an E element	
The ::before pseudo-element	2
E::after	generated content after an E element	
The ::after pseudo-element	2
E.warning	an E element whose class is "warning" 
(the document language specifies how class is determined).	
Class selectors	1
E#myid	an E element with ID equal to "myid".	ID selectors	1
E:not(s)	an E element that does not match simple selector s
	Negation pseudo-class	3
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	
Child combinator	2
E + F	an F element immediately preceded by an E element	
Adjacent sibling combinator	2
E ~ F	an F element preceded by an E element	General sibling combinator	3