CSS4-selektorer

När, eller mer om, CSS4 kommer så är det en del nya selektorer som vi får bekanta oss med. Vissa används delvis som CSS3. Med CSS4 får de fler och logiska funktioner. Vissa menar att CSS4 bara är CSS 3.2. Vad tycker du?

CSS4-selektorer


[källa:Hela härligheten är hämtad hos http://css4-selectors.com/selectors/]

Gör också gärna ett besök hos CSS4 Rocks och lär dig lite mer. Du kan faktiskt redan nu testa hur mycket din webbläsare klarar av att rendera CSS4.


Smashing Magazine har också lagt upp några exempel om hur logiken med CSS4 underlättar för oss, jag har lånat en del för att visa hur smart det kan bli. Tack för det! Låt oss kika på en vanlig menu med pseudo-classer:

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
   color: red;
}

Tänk om vi kunde göra så här istället:

ul.menu li a:matches(:link, :hover, :visited, :focus) {
   color: red;
}

Men det stannar inte här, utan med pseudo-classen :matches kan vi förenkla det ännu mer:

article:matches(.active, .visible, #important) {
   background: red;
}

En redan förekommande pseudo-class i CSS3 är den negativa :not. Här har man gått ytterligare ett steg:

p:not(.active, .visible) {
   color: red;
}

Vi får fler psudo-classer vad gäller våra länkar och hur vi kan styla dem. Först har vi :any-link, en pseudo-class som sammanfogar a:link och a:visited.

a:link,
a:visited {
   color: red;
}

any:link stylar dem båda och oavsett om de är besökta eller ej så kan vi ge dem samma länkfärg via detta:

a:any-link {
   color: red;
}

Den andra pseudo-classen är :local-link, och nu händer det saker för du kan ge dina länkar olika styling, exempel din förstasida har en färg på länkarna, utan att dina andra länkar berörs.

nav :local-link {
   text-decoration: none;
}

Tack vare detta behöver vi inte längre använda text-decoration. Låt oss kika på ännu ett exempel som stylar alla utgående länkar:

:not(:local-link(0)) {
   color: red;
}

Som sista exempel ska vi se hur bra :local-link kan användas med en parameter om man använder breadcrumbs eller en menu:

nav :local-link(0) {
   color: red;
}
nav :local-link(1) {
   color: green;
}
nav :local-link(2) {
   color: blue;
}
nav :local-link(3) {
   color: yellow;
}
nav :local-link(4) {
   color: gray;
}

Ponera att den nuvarande addressen är http://kaxigt.com/2017/08/12/some-title/, och du har dessa länkar i din breadcrumb:

1. Home
    http://kaxigt.com/
 2. 2017
    http://kaxigt.com/2017/
 3.  Augusti 2017
    http://kaxigt.com/2012/10/
 4. 12 Augusti 2017
    http://kaxigt.com/2017/08/12/
 5. Article
    http://kaxigt.com/2017/08/12/some-title/

Den första länken blir röd, den andra grön, den tredje blå, sen gul, och grå.


Information är också hämtad hos CSS4 – W3C Working Draft from .

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *