The negation pseudo-class :not is used to select an element and negate the style that is applied to the element.
Example of using the :not pseudo-class are given as:
button:not([DISABLED]) /* Example 1*/
*:not(p) /* Example 2*/
html |*:not(:link):not(:visited) /*Example 3*/
Explanation of above example:
<!doctype html>
<head>
<title>negation pseudo-class test :not()</title>
<style type="text/css">
p{
background:orange;
border:1px solid green;
}
:not(p){
background:silver;
margin:30px;
}
a{
background:magenta;
color:blue;
}
a:not([href*=google]){
background:red;
color:white;
}
</style>
</head><body>
negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class
<p>This is :not() pseudo-class example</p>
<ol type=A>
<li><a href="http://google.com">google</a></li>
<li><a href="http://www.webmasterworld.com">webmasterworld</a></li>
<li><a href="http://google.co.uk">google UK</a></li>
<li><a href="http://www.rediff.com">rediff</a></li>
<li><a href="http://www.yahoo.com">yahoo</a></li>
</ol>
negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class
<p>This is the second paragraph of :not() pseudo-class example</p>
</body>
</html>
The output of the above Web page is:
Example of using the :not pseudo-class are given as:
button:not([DISABLED]) /* Example 1*/
*:not(p) /* Example 2*/
html |*:not(:link):not(:visited) /*Example 3*/
Explanation of above example:
- Example 1- Negates the effect of all the disabled buttons
- Example 2- Negates the style applied on the p elements.
- Example 3- Negates the style applied to visited links
<!doctype html>
<head>
<title>negation pseudo-class test :not()</title>
<style type="text/css">
p{
background:orange;
border:1px solid green;
}
:not(p){
background:silver;
margin:30px;
}
a{
background:magenta;
color:blue;
}
a:not([href*=google]){
background:red;
color:white;
}
</style>
</head><body>
negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class
<p>This is :not() pseudo-class example</p>
<ol type=A>
<li><a href="http://google.com">google</a></li>
<li><a href="http://www.webmasterworld.com">webmasterworld</a></li>
<li><a href="http://google.co.uk">google UK</a></li>
<li><a href="http://www.rediff.com">rediff</a></li>
<li><a href="http://www.yahoo.com">yahoo</a></li>
</ol>
negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class negate pseudo-class
<p>This is the second paragraph of :not() pseudo-class example</p>
</body>
</html>
The output of the above Web page is:
No comments:
Post a Comment