css3 :not(selector) selector

Published

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.
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.







Comments

  1. Thanks Muhammed Aslam. You are so good at writing good articles. keep it up.

    ReplyDelete