7 – CSS selectors

Fram till nu har vi verktyg i CSS för att ändra färg på alla taggar av en viss sort. Ändrar vi egenskaper för elementet <p> ändrar vi på all text som ligger i alla <p>-element. Oftast vill man att olika delar av hemsidan ska få olika egenskaper.

Ett exempel är att du i din sidfot vill att texten ska vara något mindre i storlek än i huvudinnehållet. Texten kanske ska vara mörkgrå istället för svart så den inte är riktigt lika stark som övriga innehållet.

Du kan peka ut bara texten som ligger i sidfoten med följande CSS.

Texten i sidfoten ändras med följande CSS: footer p { font-size: 90%; }

Notera hur vi har två ord i vår CSS-selector. Jag tänker mig det som att webbläsaren letar upp alla <footer>-element och går in i dem och letar efter alla <p>-element.

Det är inte begränsat till bara två ord utan vi kan lika gärna ändra all text som ligger i <strong>-taggar.

footer p strong {
    font-size: 120%;
}

Förutom att ge en längre sökväg finns det otroligt många andra sätt att peka ut olika element i HTML. Nedan följer några vanliga.

ID & Class

Alla element i HTML kan få en slags namn (id) eller en slags sort (class). Du kan behöva detta när du t.ex. har många rubriker som ska se olika ut.

<article>
	<h1>Inledning</h1>
	<p>...</p>

	<h1>Analys</h1>
	<p>...</p>
</article>

För att namnge ett element använder man attributet ID. På varje HTML-sida får ett ID finnas max en gång (& aldrig mer än en gång). Skapar du istället ett element som ska användas många gånger använder du attributet class.

<h1 id="foretagsnamn">Webbskolan</h1>
<p class="diskret">Lite tunnare text</p>
<p>Vanlig brödtext</p>
<p class="diskret">Mer av den tunnare texten</p>

I CSSen kan du sedan ändra dem så här

#foretagsnamn {
    font-family:fantasy;
} 
.diskret {
    color: #ccc;
}

Det smarta i första exemplet är att du ändrar exakt de elementet och inget annat. I det andra fallet ändrar du flera liknande element men inte den vanliga brödtexten.

E-handdelssida / mer avancerat ID & class – exempel

Tänk att du ska designa en e-handels-sida. Olika sorters produkter ska synas bredvid varandra. Du designar en box (.produkt) som innehåller produkt-fotot, namnet och priset. För chark-varor ska bakgrundsfärgen i .produkt-boxen vara röd och för mejeri gul.

Notera att varje produkt har två klasser. Både .produkt och .chark eller .mejeri.

HTML för produkterna

<article class=”produkt chark”>
    <img>
    <h1>Korv</h1>
    <p>25:-</p>
</article>

<article class=”produkt chark”>
    <img>
    <h1>Skinka</h1>
    <p>25:-</p>
</article>

<article class=”produkt mejeri”>
    <img>
    <h1>Ost</h1>
    <p>69:-</p>
</article>

CSS för produkterna

.produkt {
    /* Alla gemensamma egenskaper som tex. storlekar och marginaler här. */
}

.chark {
    background-color: red;
}

.mejeri {
    background-color: yellow;
}

Pseudos

Ofta kan man vilja att färgen ändras när musen kommer över en länk. Det finns en teknik som heter pseudo-klasser för att göra detta i CSS.

a:hover {
    background-color: red;
}

Det måste inte vara på just en länk du ändrar färgen. Det finns väldigt många olika. De vanligaste är följande:

  • :hover
  • :active
  • :first-child
  • :last-child

Det finns även ett gäng pseudo-element. Det är alltså ett element som lägger sig i din HTML precis före eller efter elementet du sätter det på.

  • ::before
  • ::after

Övningar

#1

Din uppgift är att utöka och förbättra utseendet på en fiktiv e-handel genom att bara ändra CSS. Du får alltså inte röra HTML alls.

Färgval, typsnitt osv är valfritt men målet är att du ska öva CSS-selectors och få erfarenhet i att ändra CSS. Det är ungefär så här det kan gå till att göra ändringar på en WordPress-sida via sk. child themes.

Ladda ner kursmaterialet på Github. Packa upp filen och i mappen HTML-CSS hittar du en mapp för kapitel 7. I den finns en HTML-fil som heter matbutiken.html och en CSS-fil som heter din-style.css. Du öppnar HTML-filen i webbläsaren och gör dina andringar i CSS-filen. Målet att att skapa något ungefär som efter-bilen nedan.

#2

Gör minst de 10-15 första övningarna på CSS Diner. Många är väldigt svåra så ta god tid.

#3

Det finns även en gammal övning där du sparar ner en HTML-fil och gör ändringar direkt i den. Vill du så öppna CSS-selectors-övningar i ett nytt fönster i er webbläsare. Läs texten och gör övningarna 🙂