A :not() egy pseudo osztály, ami egy paramétert fogadva kijelöli az összes olyan elemet, ami nem egyezik meg azzal a paraméterrel.

:not() pseudo osztály használata

A pseudo osztálynak a következő kijelölőket adhatjuk át:

  • típus kijelölő (div, span, ul)
  • osztály kijelölő (.content, .sidebar)
  • ID kijelölő (#content)
  • Pseudo osztály kijelölő (:first-child, :last-child)
  • * kijelölő

Paraméterként nem adhatunk át pseudo elemet (::before, ::after), valamint másik :not() osztályt, vagyis nem ágyazhatunk egymásba további tagadó kifejezéseket!

li:not(.new) {
   /* az össszes olyan lista elem, ami nem rendelkezik a .new osztály kijelölővel */
}

A pseudo osztály összefűzhető saját magával, tehát egy elem esetében, akár több feltételt is kizárhatunk:

li:not(.new):not(.marked) {
   /* az össszes olyan lista elem, ami nem rendelkezik a .new és a .marked osztály kijelölővel */
}

Használhatjuk globálisan is, a következőképpen:

:not(a) {
    color: pink;
}

Mint az összes pseudo elem, így ez is összefűzhető további pseudo osztályokkal, vagy elemekkel:

li:not(.old)::after {
    content: "Új!";
    color: deepPink;
}

See the Pen :not() használat by Adam Laki (@adamlaki) on CodePen.

Használati eset – utolsó elem figyelmen kívül hagyása menük esetén

Alapeset, ha van egy menünk, hogy az egyes elemek közé elválasztót illesztünk be. Az elválasztót általában az utolsó (vagy első) elem esetében el szoktuk rejteni, felülírva a korábban deklarált értékeket. Az első, vagy utolsó elemet a :last-child/:first-child pseudo osztályok segítségével jelöljük ki.
Mindezt elkerülhetjük egy ügyes :not() használattal:

 li:not(:last-child) {
     margin-right: 20px;
 }

See the Pen d6196a3c91b90f2f031c4822410b6803 by Adam Laki (@adamlaki) on CodePen.

A fenti példában kijelöltük az összes li elemet, kivéve az utolsót, amit ennek a pseudo osztálynak köszönhetően figyelmen kívül hagytunk!

,