|
Applies to any element in the document tree. The universal selector is omitted if it is not the only component of a sequence of simple selectors.
*#myid and #myid are equivalent.
*.className and .className are equivalent,
*[attr=val] and [attr=val] are equivalent.
|
|
|
Applies to an element of type E (E is a the name of the node).
|
|
<head>
<style>
b {
color:red;
}
</style>
</head>
<body>
<b>This bold tag color is red.</b>
<div>
<b>This is red, too.</b>
</div>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
Applies to any element whose class attribute value is equal to className.
|
|
<head>
<style>
.myClass {
color:red;
}
</style>
</head>
<body>
<b class="myClass">This bold tag color is red.</b>
<div class="myClass">This division is red, too.</div>
<b>But this bold tag is black.</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
Applies to any element whose id attribute value is equal to myID.
|
|
<head>
<style>
#myBold {
color:red;
}
</style>
</head>
<body>
<b id="myBold">This bold tag color is red.</b>
<br />
<b>But this bold tag is black.</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E whose class attribute value is equal to className.
|
|
<head>
<style>
B.myClass {
color:red;
}
</style>
</head>
<body>
<b class="myClass">This bold tag color is red.</b>
<div class="myClass">This division is black.</div>
<b>And this bold tag is black, too.</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
Applies to an element of type E whose id attribute value is equal to myID.
|
|
<head>
<style>
B#myBold {
color:red;
}
</style>
</head>
<body>
<b id="myBold">This bold tag color is red.</b>
<div id="myBold">This division is black.</div>
<b>And this bold tag is black, too.</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E with an "attr" attribute.
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title] {
color:red;
}
</style>
</head>
<body>
<span title="red text">span with title attribute</span>
<br />
<span>span without title attribute</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E with an "attr" attribute equal to "val".
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
input[type=reset] {
color:red;
}
</style>
</head>
<body>
<form action="#URL#" method="post">
User Name: <input type="text" name="userName" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Sign in" />
</form>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E with an "attr" attribute and whose value contains at least one occurance of the "val" string.
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title*="hello"] {
color:red;
}
</style>
</head>
<body>
<span title="hello my friend">span with "hello" in title</span>
<br />
<span title="my friend">span without "hello" in title</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E whose "attr" attribute value is a list of space-separated values, and at least one is equal to "val".
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title~="hello"] {
color:red;
}
</style>
</head>
<body>
<span title="hello my friend">span with "hello" in title</span>
<br />
<span title="hello-my-friend">span with "hello" in title, but separated with hyphen</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E whose "attr" attribute value is a list of hyphen-separated values, and at least one is equal to "val".
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title|="hello"] {
color:red;
}
</style>
</head>
<body>
<span title="hello-my-friend">span with "hello" in title separated with hyphen</span>
<br />
<span title="hello my friend">span with "hello" in title, but separated with space</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E with an "attr" attribute and whose value begins exactly with "val".
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title^="hello"] {
color:red;
}
</style>
</head>
<body>
<span title="hello my friend">span with "hello" at the beginning in title</span>
<br />
<span title="my friend hello ">span with "hello" at the end in title</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an element of type E with an "attr" attribute and whose value ends exactly with "val".
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
span[title$="hello"] {
color:red;
}
</style>
</head>
<body>
<span title="hello my friend">span with "hello" at the beginning in title</span>
<br />
<span title="my friend hello">span with "hello" at the end in title</span>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an F element that is a descendant of an E element.
|
|
<head>
<style>
B SPAN {
color:red;
}
</style>
</head>
<body>
<span>a stand alone span</span>
<br />
<b>
<span>span within a b element</span>
</b>
<br />
<b>
<i>
<span>span within a b element but not as a direct child</span>
</i>
</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an F element that is a direct child of an E element.
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
B > SPAN {
color:red;
}
</style>
</head>
<body>
<span>a stand alone span</span>
<br />
<b>
<span>span within a b element</span>
</b>
<br />
<b>
<i>
<span>span within a b element but not as a direct child</span>
</i>
</b>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an F element that is immediately preceded by an E element.
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
B + DIV {
color:red;
}
</style>
</head>
<body>
<div>a div element</div>
<b>this is a bold element</b>
<div>a div element preceded by a bold element</div>
<div>another div element </div>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
|
|
Applies to an F element that is preceded by an E element.
Note, this property works in Internet Explorer only from version 7.
|
|
<head>
<style>
B ~ DIV {
color:red;
}
</style>
</head>
<body>
<div>a div element</div>
<b>this is a bold element</b>
<div>a div element preceded by a bold element</div>
<div>another div element </div>
</body> |
|
|
|
Did you find this example helpful?
yes
no
|
|
User Contributed Comments
