Meir om selectorar

3 februar 2015

Eg har plukka ut ti nyttige måtar å bruka selectorar på, dei fleste henta frå "The 30 CSS Selectors you Must Memorize". Lenkene til kvar selector nedanfor er til w3schools. Dei har også ei fullstendig liste over alle selectorar.

1: *

* {
 margin: 0;
 padding: 0;
}

Dette er ein såkalt universell selector, og den gjeld for alle element på sida. Men dette er noke ein bør bruka med forsiktighet.

2: X

Her kan X stå for eit navngitt element td a eller ul:

a { color: red; }
ul { margin-left: 0; }

Hvis du bare vil gi ein stil til ein spesiell type element, feks. alle lenker, så bruker du type. Her får alle lenker raud farge, mens alle punktlister får 0 venstremarg.

3: #X

Her står X for ein id som du sjøl har gitt navn til, feks. id="container"

#container {
   width: 960px;
   margin: auto;
}

Her velger vi ut element med eit bestemt id. Men dette er ikkje noke du vanligvis treng. Prøv heller å plukka ut element med typenavnet som over, eller ein klasse, som nedanfor.

4: .X

.error {
  color: red;
}

Dette er class selectoren. Denne kan du bruka når du har mange element av ulik type som du vil gi samme stil.'

5: X, Y

Her er X og Y to navngitte element, td. p og div:

p, div {
  text-decoration: none;
}

Hvis du vil ha samme stil på to eller fleire element, kan du bare laga ei kommaseparert liste. Dette eksempelet gir samme stil til alle p og div-element.

6: X Y

Her er X og Y, som over, to navngitte element, td. li og a:

li a {
  text-decoration: none;
}

Denne heiter på engelsk descendant selector. På norsk kan vi kalla det for etterkommar-selector. I eksempelet plukkar den ut alle lenker (a) som er innanfor eit listeelement (li) Vi kan sei at lenker då er ein etterkommar til liste-elementet. Her kan du ha mange nivå med avkom av etterkommarar. Du bruker den når du, som i dette tilfellet, ikkje vil gi denne stilen til alle lenkene, men bare dei som er i lister. Dette er ofte nyttig når du skal laga menyar.

7: X > Y

Her er X og Y fremdeles to navngitte element som td. li og a:

li > a {
  text-decoration: none;
}

Denne kan vi kalla for barne-selectoren. Den virkar som etterkommer-selectoren over, men bare på dei direkte etterkommarane, dvs barn. I eksempelet plukkar den ut alle lenker (a) som er innanfor eit listeelement (li), men ikkje hvis det er nivå imellom. Det vil altså ikkje virka på td.

<li><span><a ...>.

8: a:visited og a:link

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

Dette eksempelet gir stiler til lenker på ein spesiell måte. :link viser til lenker som brukaren ikkje har klikka på, og :visited viser til alle dei du har klikka på.

9: X:hover

Her er X ofte ei lenke (dvs. a) men det vera kva element som helst, td. ein div:

div:hover {
  background: #e3e3e3;
}

Hover gir stil til ein div når markøren er over den. I dette tilfellet får den ny bakgrunnsfarge. Denne måten er ofte også brukt til lenker, som feks. å gi ein border-bottom til lenker når markøren er over dei.

a:hover {
 border-bottom: 1px solid black;
}

10: X::pseudoElement

Her kan X vera ein selektor, og pseudoElement kan td. vera first-line eller first-letter, som i disse eksempela:

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Dette kallast for pseudo elements (når vi bruker ::). Det kan vera nyttig til for eksempel å gi ein stil til første linja i eit avsnitt, som over, eller den første bokstaven i eit avsnitt, som under.

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}