10 grundläggande lektioner i CSS

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-class är en class man använder för att ge vissa html-element (selektor) en specifik effekt. Syntaxen för en pseudo-class är denna:

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

Vid det här laget så vet vi ju att en selector ä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.

  1. 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:

  1. 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.

  1. 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å:

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

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

  1. 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:

  1. 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 dessutom 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, eftersom en pseudo-class föregås alltid omedelbart av ett colon oavsett var det placeras:

  1. 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.

  1. 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 medan .green är en class vi har infogat som ska formatera :visited vilket är pseudo-classen för vilken {color: är egenskapen och #669900;} är värdet.

pseudo

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

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

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>, <li> och p. 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).

parent
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:

  1. p:first-child{color:red;}

<p>Det är röd text på första stycket i blocket eftersom det är first-child. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.</p>

<p>Här är paragraf 2 – second-child. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.</p>

<p>Här är paragraf 3 – third child. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.</p>

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.

  1. p:second-child{color:red;}
  1. p:third-child{color:red;}

Kika gärna på hur W3C har exemplifierat first-child.

Det här var den sista av alla 10 lektionerna. Jag hoppas att Du har haft nytta av dem och är villig att fortsätta med css. 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!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    Hej!
    Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet 🙂 Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik

    1. Erik says:

      det ska alltså stå “krokodilgap höger P krokodilgap” vänster i meningen: “…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. Lena says:

      Hej Erik!
      All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:

      #main {background: [...]; padding:[...], font-size:[...];}

      Eller:

      #main p {font-size:[...];}

      Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
      Du har angivit body {font-size:10px} och p { font-size:10px;} därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.
      mvh/Lena

  2. Björn Andersson says:

    Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!

    1. Lena says:

      Hej Björn!

      Vad trevligt att du “fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
      TACK för berömmet!
      mvh/Lena

Leave a Reply

Your email address will not be published. Required fields are marked *