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