К содержанию

Fel vid användning av flera CSS-selektorer

Påminnelse om ett vanligt nybörjarmisstag: selektorn .bbb.zzz och selektorn .bbb .zzz gör olika saker. Den första letar efter ett element som har båda klasserna samtidigt, medan den andra letar efter ett element med klassen zzz som finns inuti ett element med klassen bbb.

Задание 1

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

cssh2.zzz {
  color: red;
}

Задание 2

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

cssh2 .zzz {
  color: red;
}

Задание 3

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb.zzz {
  color: red;
}

Задание 4

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb .zzz {
  color: red;
}

Задание 5

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb.zzz.xxx {
  color: red;
}

Задание 6

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb .zzz.xxx {
  color: red;
}

Задание 7

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb.zzz .xxx {
  color: red;
}

Задание 8

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css.bbb .zzz .xxx {
  color: red;
}

Задание 9

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css#elem.bbb {
  color: red;
}

Задание 10

Förklara vad selektorn i koden nedan väljer ut. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:

css#elem .bbb {
  color: red;
}