Zur Startseite wechseln

Impressum  |  Datenschutz  |  Kontakt
CSS




Der Inhalt ist erst nach dem Einloggen sichtbar


Aktuell geöffnete Datei: 'not'

Zum Wechseln des Themas einfach ein neues Thema eingeben





CSS_not

not


Mit :not können Selektoren Elemente, Klassen, IDs u.w. ausgeschlossen werden. Als Beispiel alle p-Elemente, außer das p-Element mit einer bestimmten Klasse. Im fogenden Beispiel wird eine Anwendungsmöglichkeit von :not gezeigt. Der Style sieht so aus:

p:not(p.f) {
     color: #ff0000;
}

Überschrift 1

Absatz 1 class="a"

Absatz 2 class="b"

Absatz 3 class="c"

Absatz 4 class="d"

Absatz 5 class="e"

Absatz 6 class="f"

Absatz 7 class="g"




p:not(p.cc,p.ff,p.gg) { /*p:not(p.cc):not(p.ff):not(p.gg)*/
     color: #ff0000;
}

Überschrift 2

Absatz 1 class="aa"

Absatz 2 class="bb"

Absatz 3 class="cc"

Absatz 4 class="dd"

Absatz 5 class="ee"

Absatz 6 class="ff"

Absatz 7 class="gg"




p:not(p:nth-child(even) {
     color: #ff0000;
}

Überschrift 3

Absatz 1 class="aa"

Absatz 2 class="bb"

Absatz 3 class="cc"

Absatz 4 class="dd"

Absatz 5 class="ee"

Absatz 6 class="ff"

Absatz 7 class="gg"




p {
     background-color: lightgreen;
}
p:not(p:nth-child(odd):hover { /*nur even & odd. an+b teilsweise; genaues Benennen funktioniert nicht, sowie :first- und :last-child */
     background-color: #ff0000;
}

Überschrift 4

Absatz 1 class="aa"

Absatz 2 class="bb"

Absatz 3 class="cc"

Absatz 4 class="dd"

Absatz 5 class="ee"

Absatz 6 class="ff"

Absatz 7 class="gg"