kaxigt.com

Välkommen till tionde och sista lektionen!

I tidigare lektioner så snuddade vi vid begreppet pseudo-class. Vi ska granska detta begrepp lite närmare för att se hur det fungerar och vad vi kan använda det till.

• Pseudo-class
• Pseudo-element
• Parent och first-child – genealogin

Pseudo-class

Pseudo-class är en class man använder för att ge vissa html-element (selektor) en specifik effekt. Syntaxen är denna:

selector:pseudo-class {property:value}

Vid det här laget så vet vi ju att en selektor är ett html-element – exempelvis div, p, a eller ul och att property är selektorns egenskap kopplat till value som är värdet på själva egenskapen.

De mest förekommande pseudo-classerna är de som formaterar hur färgerna på dina länkar ska se ut – så kallat ankar pseudo-class.

Alla webbläsare stöder inte pseudo-classer, dock kan man använda dem på sina länkar utan att vara orolig för att de inte ska fungera. Det är därför viktigt att man vet i vilken ordning man lägger upp sina länkar.

Följande märkning ger alla länkar samma färg och de ändrar inte färg om du för musen över dem eller om du klickar på dem.

a {color:#fff}

Men vi vill ju att länkarna ska ha olika färger så vi vet om vi redan har använt länken, vad som är länkar, vilken länk vi använder för tillfället, och naturligtvis styla upp länkarna för att ge dem snyggare effekter.

Det är då vi väljer att använda våra pseudo-classer. Låt oss därför återigen kika på hur syntaxen var uppbyggd, men nu ska vi infoga html-elementet a (länk) som selektor och man anlägger alltid ett colon mellan selector och pseudo-class:

a:pseudo-class {property:value}

Vi ska nu styla våra obesökta länkar och göra dem vita (vi låtsas att dokumentet har en svart bakgrundsfärg). Syntaxen ser då ut så här.

a:link {color:#fff}  /* obesökt länk */

Nästa steg är att ge våra besökta länkar sin färg, de får bli ljusgrå:

a:visited {color:#ccc}  /* besökt länk */

När vi för musen över länkarna (hover) ska de ytterligare ha en färg som särskiljer sig, därför gör vi dem mellangrå:

a:hover {color:#666}  /* musöver länk */

Sist ska vi färglägga den valda länken (selected) – vi ger den en mörkgrå färg:

a:selected {color:#333}  /* vald länk */

Pseudo-classen för var och en av länkarna är således:

:link - obesökt länk | :visited - besökt länk | :hover - musöver länk | :active - vald länk (den för tillfället aktiva länken)

För att få detta att fungera så måste a:hover komma efter a:link och a:visited, och a:active måste komma efter a:hover. Den rätta ordningen man skriver in sina länkar i stilmallen är därför denna:

1. a:link {color:#fff} /* obesökt länk */
2. a:visited {color:#ccc} /* besökt länk */
3. a:hover {color:#666} /* musöver länk */
4. a:active {color:#333} /* vald länk */

Pseudo-classer är inte känsliga för stora eller små bokstäver.

För att tränga lite djupare in i begreppet class/pseudo-class så kan man även lägga in en class tillsammans med en pseudo-class. Kika på syntaxen.

Ge akt på att vårt colon nu har placerats mellan class-märkningen och pseudo-classen istället för som tidigare, efter selektorn. Det gör vi eftersom en pseudo-class alltid omedelbart föregås av ett colon. Oavsett var det placeras.

selector.class:pseudo-class {property:value}

Vi ska exemplifiera detta med våra länkar. Vald selector är a, men vi vill bara att vissa av de besökta länkarna ska ha en egen färg och utseende. Därför stoppar vi in en class som enbart ska formatera just den pseudo-classen. Säg att vi vill att färgen ska vara grön istället för ljusgrå (#ccc).

Då skriver vi först en class som ska kalla på dessa värden, därefter definierar vi vilken pseudo-class det är som ska omfattas.

Sist lägger vi in classens egenskaper, det vill säga att det handlar om en textfärg – color och att denna ska ha värdet #669900.

a.green:visited {color:#669900;}

För att verkligen förtydliga detta så inga missförstånd uppstår så är a själva selectorn. .green är en class.

Vi har infogat den att formatera :visited vilket är pseudo-classen för vilken {color: är egenskapen och #669900;} är värdet.

Html-koden blir denna, och enbart för de länkar som du anger med <a class=”green”>

<a class="green" href="doc.html">Ditt länkade webbdokument</a>

Ditt länkade webbdokument

Pseudo-element CSS3

Vissa tidiga pseudo-element använde syntaxen med enkel-kolon : så du kan ibland se detta i vissa koder. Moderna webbläsare stöder de tidiga pseudo-elementen med enkel- eller dubbel kolon-syntax :: för bakåtkompatibiliteten.

Ett CSS-pseudo-element används för att utforma angivna delar av ett element. De visas inte i DOM (Document Object Model) men syns ändå eftersom de lägger till specialeffekter till vissa selektorer och därigenom utformar vissa delar av ett HTML-element.

Pseudo-element beter sig på liknande vis som en pseudo-class. Dock fungerar de som om du hade lagt till ett helt nytt HTML-element i din mark-up än att tillämpa en class på ett befintligt element.

Syntax för pseudo-element

Till skillnad från pseudo-class enkla kolon : så lägger man till ett dubbel-kolon :: i pseudo-element.

selector::pseudo-element {property: value;}

Det går även att kombinera en pseudo-class med ett pseudo-element.

selector.class::pseudo-element {property: value;}

::first-line Pseudo-element

p::first-line pseudo-element används när man vill lägga till en speciell stil på första raden av en text, exempelvis paragrafer.

p::first-line {color: #ff0000; font-variant: small-caps;}

Du kan tillämpa följande egenskaper på pseudo-elementet ::first-line:

    font properties
    color properties
    background properties
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

::first-letter Pseudo-element

Med pseudo-elementet ::first-letter kan vi lägga till en stil på den första bokstaven i en text. Applicerar vi det på elementet p så blir syntaxen följande:

p::first-letter {color: #ff0000; font-size: xx-large;}

Du kan tillämpa följande egenskaper på pseudo-elementet ::first-letter:

    font properties
    color properties 
    background properties
    margin properties
    padding properties
    border properties
    text-decoration
    vertical-align (endast om "float" är ställd "none")
    text-transform
    line-height
    float
    clear

Kombinera pseudo-class och pseudo-element

Om du vill göra första raden i första stycket fetstilt kan du föra samman selektorerna :first-child och ::first-line.

Säg att vi vill välja den första raden, av det första <p> -elementet, som finns i ett <artikel> -element.

article p:first-child::first-line {font-size: 120%; font-weight: bold;}

::before och ::after Pseudo-element

Det finns ett par speciella pseudo-element som används tillsammans med innehållsegenskapen för att infoga innehåll i ditt dokument med CSS.

Du använder ::before och ::after för att infoga en textsträng, bild, list-bullet eller liknande att positioneras före eller efter innehållet av ett element.

li::before {
  content: "images/image.gif";
  background: #ccc;
  border-radius: 1px;
  padding-inline: 1px;
  margin-inline-end: 1px;
}

h1::after {
  content: url(image.gif);
}

Se även developer.mozilla.orgs referens sektion om pseudo-class samt pseudo-element.

I artikeln A Whole Bunch of Amazing Stuff Pseudo Element Can Do av CSS-tricks visar Chris Coyier på några spännande och inspirerande saker man kan åstadkomma med pseudo-element.

Parent och first-child – genealogin

I css finns det också något man benämner som parent, first-child, second-child och third-child – med andra ord ett html-elements genealogi.

Vi ska inte förväxla detta med de block-nivåer ett html-element har som inneboende egenskap att kunna bilda block inuti sig själv, så kallade block-level element: <div> <p> <li>.

Parent är ett ”föräldrar-element” som kan innehålla fler och andra element. Exempel på parent är <div>, <p> och <li>.

De element som då finns ”inne” och är knutna till detta föräldrarelement kallas för barn (children). Dessa rangordnas i fallande skala från first-child och nedåt i något som kallas för child-element.

Dock kan inte barnen i sin tur anges som föräldrar (parents) eftersom det inte finns något som heter grand-children (barn-barn) utan endast föräldrar/barn (parent/child).

När man definierar en css child-selector så formaterar man endast de child-elements som är knutna till den specifika föräldern (parent).

Eftersom pseudo-classen first-child kopplas till ett specificerat html-element, som i sin tur är first-child till ett annat element, innebär det att bortsett rot-elementet så är faktiskt alla element på något vis barn till varandra.

Observera för att first-child ska fungera i IE så måste du använda ett relevant doctype.

Hur och när använder man då first-child?

Låt oss säga att du endast vill formatera den första delen av ett block som du använder. Då kan du göra så här för att exempelvis få en röd text att relatera till den första paragraf p-taggen:

p:first-child {color:red;}

Det är röd text på första stycket i blocket eftersom det är first-child.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

p:second-child {color:blue;}

Det är blå text på andra stycket i blocket eftersom det är second-child. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

p:third-child {font-style:italic;}

Det är kursiv text på tredje stycket i blocket eftersom det är third-child. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

Skulle du istället vilja formatera second eller third-child, det vill säga andra eller tredje stycket, så anger du bara detta i märkningen.

p:second-child {color:blue;}
p:third-child {font-style:italic;}

Det är blå text på andra stycket i blocket eftersom det är second-child. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

Det är kursiv text på tredje stycket i blocket eftersom det är third-child. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

Det här var den sista av alla 10 lektionerna. Jag hoppas att Du har haft nytta av dem.

Har du några funderingar, frågor, eller annat du vill kommentera så hör Du antingen av dig eller lämnar en liten kommentar där det passar.

Tack för att Du bestämde dig för att följa med mig ända hit!