CSS Ännu lite mer: Barn Pseudo och prioritet samt "!important"

Ytterliggare möjligheter

Det är viktigt att du behärskar möjligheterna att skriv effektiva snygga korrekta stilmallar.

DOM i botten

Grunden till att vi kan komma åt olika element på webbsidan är DOM, Document Object Model. Alla element bildar ett träd, html är stammen, body och head blir två grenar som i sin tur grenar upp sig ytterliggare. Denna struktur ger oss möjligheten att styra utseendet på olika taggar med hjälp av CSS och ett antal regler.

Flera selektorer med samma inställningar, separeras med kommatecken

body, p, .enKlass, #ettId { ... }

En selektor som är barn inuti en annan selektor, oavsett nivå

article header { ... }
div p span { ... }

En selektor som är direkt barn till en annan selektor, dvs endast nivån under

article > header { ... }
div > h2 { ... }

Pseudoklasser

a:hover { ... }
tr:nth-child(even) { ... }
article > div:first-of-type { ... }

Pseudoelement

div > h1::first-letter { ... font-size:2em; ... }

Ett praktiskt exempel

@charset "UTF-8";
.main {
    margin:auto;
    width:622px;
    font-family:sans-serif;
}
article {
    background-color: white;
    border: 1px solid black;
    padding:10px;
    float:left;
}
h1 {text-align: center;}
section {
    width:116px;
    border:2px solid red;
    float:left;
    padding:10px;
    margin-left: 10px;
}
.no_padding {
    margin-left: 0px;
}
article div {
    background-color: #9f9;
}
body, section div {
    background-color: #eee;
}
article header {
    text-align: left;
    font-weight: bold;
}
article > header {
    text-align: center;
    color:red;
    font-size: 30px;
}
section:nth-child(even) {
    border-color: #993;
}
article > div:first-of-type {
    margin-bottom: 20px;
    padding:10px;
    font-weight: bold;
}
div > h1::first-letter {
    font-size:2em;
}

<div class="main">
    <h1>Ännu mer CSS</h1>
    <article>
        <header>Ytterliggare möjligheter när vi skriver stilmallar</header>
        <div>Grunden till att vi kan komma åt olika element på webbsidan är DOM, Document Object Model. Alla element bildar ett träd, html är stammen, body och head blir två grenar som i sin tur grenar upp sig ytterliggare. Denna struktur ger oss möjligheten att styra utseendet på olika taggar med hjälp av CSS och ett antal regler.
        </div>
        <section class="no_padding">
            <header>Flera selektorer med samma inställningar, separeras med kommatecken</header>
            <div>body, p, .enKlass, #ettId <br>{ ... }</div>
        </section>
        <section>
            <header>En selektor som finns inuti en annan selektor, oavsett nivå</header>
            <div>article header { ... }</div>
        </section>
        <section>
            <header>En selektor som är barn till en annan selektor, dvs endast nivån under</header>
            <div>article > header { ... }</div>
        </section>
        <section>
            <header>Pseudo-klasser</header>
            <div>a:hover, tr:nth-child(even), article > div:first-of-type { ... } </div>
        </section>
    </article>
</div>

Till demosidan

Prioritet

Webbläsaren har en viss logik när den ska tolka olika css inställningar. Den prioriterar vissa inställningar mer. Det är viktigt att känna till hur den tänker så vi kan skriva vår kod och få det som vi vill.

Prioriteringsordning med högst prioritet överst:

ID:n
t ex #myTextColor
Klasser, pseudoklasser
t ex .minAndraTextFarg, div::first-letter
själva elementen
t ex div eller a

    #myTextColor {color:red;}
    .minTextFarg {color: green;}
    div {color:black;}
    span {color:blue;}

<div>
    Hejsvejs
    <div id="myTextColor" class="minTextFarg">1) Vilken styr nu?
    </div>
    <div class="minTextFarg" id="myTextColor" >2) Vilken styr nu?
    </div>
    <div id="myTextColor">
        Min text som styrs av id:n <span class="minTextFarg">Text i min klass</span><span>Text i mitt element</span>
    </div>
</div>

Till demosidan

Vad innebär "!important" ?

Det innebär "det här är viktigt, ignorera normala prioritetsregler och alla specificeringregler, använd den här regeln!".

Normalt så har en regel i head-elementet högre prioritet än regeln i en extern css-fil. På samma sätt har en "inline-style" inställning högre prioritet än regeln in head-elementet ( förutsatt att alla regler har samma specifitet).
Specifitet är hur noga vi i css-filen har beskrivit elementet eller klass/id. Normalt kör en mer specifik regel över en mindre specifik.
Ett exempel:
span { /* css */ }
har normalt lägre prioritet än
.minAndraFarg { /* css */ }

Skriver vi en regel med !important-egenskapen så omkullkastar vi alla ovanstående normala prioriteringsegenskaper.

span {color:blue !important;}

Att använda "!important" bör undvikas men det kan ibland vara nödvändigt (det finns vissa få fall där det finns ett bra syfte). Med många "!important" i stilmallen blir all typ av "debugging" en mardröm.

    #myTextColor {color:red;}
    .minTextFarg {color: green;}
    div {color:black;}
    span {color:blue !important;}

<div>
    Hejsvejs
    <div id="myTextColor" class="minTextFarg">1) Vilken styr nu?
    </div>
    <div class="minTextFarg" id="myTextColor" >2) Vilken styr nu?
    </div>
    <div id="myTextColor">
        Min text som styrs av id:n <span class="minTextFarg">Text i min klass</span><span>Text i mitt element</span>
    </div>
</div>

Till demosidan