Attribute Selector Patterns

July 25, 2008 at 8:17 pm (CSS)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>

<!–
Attribute Selector Patterns
E[attr] Attribute selector, matches any element E that has attribute attr, regardless of its value.

E[attr="value"] Attribute selector, matches any element E that has attribute attr set to the specified value.

E[attr~="value"] Attribute selector, some element attributes may have multiple values, separated by spaces. This pattern matches any element with attribute attr containing the specified value in its list.

E.value Class selector, for HTML pages only. Matches any element that has the specified value in its CLASS attribute. Equivalent to E[class~="value"].

E#value ID selector, matches the element with the given ID. For HTML this is equivalent to E[id="value"].

–>

<style>

p[onclick]{
color:#FF0000;
}

p[disabled]{
font-size:20px;
}

p[align="right"]
{
font-family:comic sans ms;
}

p[class~="zzz"]
{
background-color:#aaa;
}

</style>

</head>
<body>
<p disabled=”true” align=”center” class=”zzz www ddd”>Heloo World</p>
<p style=”font-family:arial;font-size:12px;” class=”lll ppp mmm”>2012</p>
<p onclick=”" align=”right” class=”abc xyz zzz”>2010</p>
</body>
</html>

Courtesy: http://www.brainjar.com

Post a Comment