Olika element i samma CSS dokument

Du kan ha flera klasser på samma element, men inte flera id eftersom det är unikt.
Navbar och green ser du i hans kommentar.

Navbar och mellanslaget och en till menar att det finns fler stiler att läsa in.

Exempel:

CSS

.left{
left: 0;
}

.absolute{
position: absolute;
}

#mindiv{
border: solid 4px #f10;
height: 50px;
width: 100px;
padding: 5px;
}

HTML

<div id="mindiv" class="left absolute">
Test
</div>

Testa i https://jsfiddle.net/ om du vill se det live. Jag har förberett en åt dig: https://jsfiddle.net/0yzbyy5m/4/embedded/result/
Notera hur inget som ligger tillsammans med id:t blir påverkat av den padding som finns där.

koden hittar du här: https://jsfiddle.net/0yzbyy5m/4/

Id och klasser är väldigt viktiga då man jobbar med CSS, det lönar nog sig för dig att läsa in dig lite.

Som nämndes ovan separeras klasser med mellanslag, så i exemplet med navbar, blue och green så har ena ul:en klasserna navbar och green, andra navbar och blue.

Ett element bör ha högst ett id, och till skillnad från klasser får inte flera element ha samma id. Annars fungerar det nästan på samma sätt.

Klasser skiljer sig från div:ar precis som klasser skiljer sig från ul:ar, div och ul är element, klasser grupperar en mängd element som skall ha samma stil. Du kan inte använda div för att ha en ul i en färg och en annan i en annan färg, om inte du endast har ena innanför en div, vilket är en dålig lösning.

Om ett element har flera klasser/id som ger motstridiga uppgifter används den stil för vilket elementet är mera noggrant specificerat.

CSS

.test {
     font-size: 14px;
}
p.test {
    font-size: 16px;
}
#red-paragraph {
    color: #F00;
}

HTML

<div>
    <p class="test test2">Den här texten är 16px, för p.test är noggrannare än test.</p>
    <p id="red-paragraph">Den här texten är röd.</p>
</div>

Det finns flera sätt att referera till elementen ovan i en CSS-fil:

/* Alla paragrafer */
p {
    (...)
}
.test { /* Alla element med klassen test */
    (...)
}
p.test { /* Alla paragrafer med klassen test */
        (...)
}
div p.test { /* Alla paragrafer med klassen test, innanför en div */
    (...)
}
body div p.test { /* Alla paragrafer med klassen test, innanför en div, innanför en body-tag */
    (...)
}
div .test { /* Alla element med klassen test innanför en div */

}
#red-paragraph { /* Elementet med id red-paragrah */
    (...)
}
div #red-paragraph { /* Elementet med id red-paragraph, som är innanför en div */
    (...)
}
/* Bägge paragraferna, kommatecken separerar dem. Det här betyder alltså "Följande gäller för elementet med id #red-paragraph, och alla element med klassen test. */
#red-paragraph, .test {
    (...)
}
/* Jämför med följande, som betyder "Ett element med klassen test, innanför elementet med id red-paragraph"
#red-paragraph .test {
    (...)
}
/* Eller följande, som betyder "Elementet med id red-paragraph OCH klassen .test */
#red-paragraph.test {
    (...)
}
.test.test2 { /* Alla element med klassen test OCH klassen test2 */
    (...)
}

@Tazavoo
Ett element kan inte ha mer än ett id enligt specifikationen.

När det kommer till CSS prioriteras alltid id högre än klasser, då det per definition är mest specifikt (det är unikt per element). Oftast används ett id för att hitta ett element i DOM-trädet och CSS appliceras genom klasser även för element som har id.

Gällande klasser bör man undvika att ge dem namn i stil med "red" eller "left". Färger, positionering, storlek och liknande är konkreta attribut, inte klasser. Det är ingen poäng med att ha en klass "red" som definierar color: red på ett element; det är bättre att lägga sådan information i style-attributet direkt men helst ska det också undvikas.

Precis så!