kaxigt.com

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

• Negation pseudo-class selector
• Matches-any pseudo-class selector
• Local link pseudo-class selector
• Time-dimensional pseudo-class selector
• Indeterminate-value pseudo-class selector
• Default option pseudo-class selector
• Validity pseudo-class selectors
• Optionality pseudo-class selectors
• Mutability pseudo-class selectors
• Structural pseudo-class selectors
• Grid-Structural pseudo-class selectors
• Descendant combination selector
• Attribute case-sensitivity selector
• Reference combination selector
• Subject of a selector with Child combinator selector
• Relational pseudo-class selector
• Dir pseudo-class selector
• Hyperlink pseudo-class selector
• Lang pseudo-class selector
• Scope pseudo-class selector
• Drop pseudo-class selectors
• Placeholder pseudo-class selector
• Range pseudo-class selectors
• Column combination selector
• Blank pseudo-class selector

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

Grundläggande om pseudo-class och pseudo-element kan du bekanta dig med i 10 grundläggande lektioner i CSS.

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 https://kaxigt.com/2017/08/12/some-title/, och du har dessa länkar i din breadcrumb:

1. Home
    https://kaxigt.com/
 2. 2017
    https://kaxigt.com/2017/
 3.  Augusti 2017
    https://kaxigt.com/2012/10/
 4. 12 Augusti 2017
    https://kaxigt.com/2017/08/12/
 5. Article
    https://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 Editor’s Draft, 19 January 2021.