Det kan være bøvlet at få et element i HTML til at makke ret med CSS’en. Specielt hvis vi er rigtig langt “inde” med definitionerne. Hvis vi fx vil have et specifikt menupunkt til at have en anden farve end de andre menupunkter, kunne brugen af “!important” være nødvendig (og at foretrække).
Eksempel:
I følgende eksempel har vi en linje CSS der definerer baggrundsfaven på menupunkterne
div.gk-menu > ul.level0 > li > a { color: #ffffff; }
Vi vil dog gerne have et specifikt menupunkt til at have en anden farve. I vores HTML står der at <a>-tagget har ID’et menu340, så vi skriver #menu340 { color: blue; }.
Men ak, der skete intet med menupunktet.
Problemet er at den øverste kode definerer “hårdere” end det vi lige har skrevet. Jo tættere vi definerer på målet, des vigtigere anser browseren koden. Og i øverste kode er vi helt ude i fjerde niveau. Vi skal altså enten skrive div.gk-menu > ul.level0 > li > a#menu340 { color: blue; }
ELLER
Vi indsætter da bare den lækre !important:
#menu340 { color: blue !important; }
Med det lille ord blev vores definition af #menu340 vigtigst!