css3 :not(selector) selector
Published by Aslam
The :not(selector) selector is used for selecting elements that are NOT the specified element/selector.
it means that the condition matches every element that is NOT the specified element/selector.
we would apply this
Assume you have a paragraph and two div,s in your page,
so you want to apply green background to all those elements that are not <p> element.
it tells browser that to select all elements that are not <p> element.
and to apply this style to all elements except <p> tags in webpage.
Example: :
All elements than <p> elements will be with a green background.
Example: :
All elements than the elements with a class of myClass will be with a green background.
Example: :
All elements than the element with an ID of myDiv will be with a green background.
Example: :
All elements than the element <img> will be with a green background.
Example::
Example:
If you are using jQuery to apply css3 effect in your webpage, :not() elector will be more useful.
it means that the condition matches every element that is NOT the specified element/selector.
syntax of :not selector
:not(selector) { style properties }
Sample usage of the :not selector.
if you want a paragraph's background in green,we would apply this
p
{
background:green;
}
Assume you have a paragraph and two div,s in your page,
so you want to apply green background to all those elements that are not <p> element.
:not(p)
{
background:#ff0000;
}
it tells browser that to select all elements that are not <p> element.
and to apply this style to all elements except <p> tags in webpage.
The :not selector is supported in all major browsers but IE8 and earlier do not support the :not selector.
Here is some examples on using css3 :not() selector.
Select all elements that are not the specified element
:not(element)
{
…..
}
Example: :
:not(p)
{
background:green;
}
All elements than <p> elements will be with a green background.
Select all elements that are not the elements with specified class.
:not(.classname)
{
…..
}
Example: :
:not(.myClass)
{
background:green;
}
All elements than the elements with a class of myClass will be with a green background.
Select all elements that are not the element with specified ID.
:not(#elementID)
{
…..
}
Example: :
:not(#myDiv)
{
background:green;
}
All elements than the element with an ID of myDiv will be with a green background.
Select all BUTTONS that are not DISABLED.
button:not([DISABLED])
{
…..
}
Select all elements but NOT <element-tag>.
*:not(element-tag)
{
…..
}
Example: :
:not(img)
{
background:green;
}
All elements than the element <img> will be with a green background.
Selects all HTML elements except links.
html|*:not(:link):not(:visited)
{
….
}
Selects all elements that are not being hovered.
*|*:not(:hover)
{
…..
}
Selects all <a> elements that are not with a base HREF that holds specific URL .
a:not([href^="URL"])
{
----
}
Example::
a:not([href^=http://aslamise.blogspot.com])
{
border: 1px solid green;
}
Selects all <a> elements that have a rel=”external”.
a[rel~="external"]
{
…..
}
Selects all elements that have a name=”name” attribute, but eclude one that contain “name”.
element[name*="name"]:not([name="name-that-not-to-removed"])
{
…..
}
on hover an element that doesn't have the class “.class-name”
element-tag:not(.class-name):hover
{
……
}
Example:
li:not(.active):hover
{
background:green;
}
If you are using jQuery to apply css3 effect in your webpage, :not() elector will be more useful.
Thanks Muhammed Aslam. You are so good at writing good articles. keep it up.
ReplyDeleteNice post for all devlopers
ReplyDelete