syntax of :not selector

:not(selector) { style properties } 

Sample usage of the :not selector.

p
{ 
background:green;
} 

:not(p)
{
background:#ff0000;
} 

Here is some examples on using css3 :not() selector.

Select all elements that are not the specified element

:not(element)
{
…..
}

:not(p)
{
background:green;
} 

Select all elements that are not the elements with specified class.

:not(.classname)
{
…..
} 

:not(.myClass)
{
background:green;
} 

Select all elements that are not the element with specified ID.

:not(#elementID)
{
…..
} 

:not(#myDiv)
{
background:green;
} 

Select all BUTTONS that are not DISABLED.

button:not([DISABLED])
{
…..
} 

Select all elements but NOT <element-tag>.

*:not(element-tag)
{
…..
} 

:not(img)
{
background:green;
} 

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"]) 
{ 
----
} 

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 
{
……
}

li:not(.active):hover
{
background:green;
}

• This is a ul li block where no class assigned

• This is a ul li block where aslamise-css-reset assigned

 <a class='tpb' title='my awesome tooltip'>Tooltip</a>

Here is how you can create nice and beautiful paging buttons with css. Below is a live demo.

• 1
• 2
• 3
• 4
• next

Solution 1:

Solution 2:

Solution 3:

Solution 4:

* {
    /*transition*/
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#one 
{ 
font-size: 50px;
top: 0;
left: 0;
}

#one:hover 
{
font-size: 100px 
}

#two {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
 
 top: 0;
 left: 100px;
}

#two:hover {
    /*transform*/
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

#three {
width: 50px;
height: 50px;
text-align: center;
left: 200px;
top: 0;
}

#three:hover {
width: 100px;
height: 100px;
}

#four{
width: 50px;
height: 50px;
margin-top:-20px; 
margin-left:40px;
}
#four:hover{
zoom:150%;
}

<style>
.wrap {
    overflow: auto;
}
.bg {overflow: hidden;float: left;}
.bg2{background:red;}
.bg3{background:green;}
.bg4{background:purple;}
.bg5{background:yellow;}
.bg6{background:hotpink;}
.bg7{background:#ccc;}
.bg img {
    float: left;
    background: black;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }
  .bg img:hover {
    opacity: .5;
    cursor: pointer;
  }
</style>

<div class="wrap">
<div class="bg bg2">
<img alt="" class="t2" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
  </div>
<div class="bg bg3">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
        </div>
<div class="bg bg4">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
            </div>
<div class="bg bg5">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
                </div>
<div class="bg bg6">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
                    </div>
<div class="bg bg7">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</div>
</div>