Olika element i samma CSS dokument

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2012

Olika element i samma CSS dokument

Hej!

Har en fråga angående att använda olika element i samma CSS dokument. Med det menar jag att jag vill göra följande på denna länk, men jag vill ha två stycken navigation bars som ser olika ut, tex att den ena är gul och att den andra är röd. Använder jag mig direkt av ul i CSS dokumentet och väljer att den ska gul så kommer ju alla bars att bli gula. Kan tänka mig att det funkar med att separera dessa i två olika divar, men då är frågan hur det fungerar. Någon som har en lösning på detta?

//GreatLinkan

Intel 2500k @ 4.2Ghz | Noctua NH-U14S | ASUS P8Z68-V LX | Fractal Design Define R4 | Corsair XMS3 Vengeance 2x4GB DDR3 1600 Mhz | Gigabyte GTX 970 4GB | Fractal Design Newton R2 650W | Samsung 840 EVO 250GB | Seagate SSHD 1TB | Seagate Barracuda 1 TB | Windows 10

Trädvy Permalänk
Medlem
Registrerad
Dec 2015

Det du behöver göra då skulle förmodligen vara så att du skapar olika klasser för objekten:

.navbar { list-style-type: none; margin: 0; padding: 0; } .blue { background: blue; } .green { background: green; }

Sen så lägger du bara på de olika klasserna såhär:

<ul class="navbar blue"> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> <ul class="navbar green"> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2012
Skrivet av crnov:

Det du behöver göra då skulle förmodligen vara så att du skapar olika klasser för objekten:

.navbar { list-style-type: none; margin: 0; padding: 0; } .blue { background: blue; } .green { background: green; }

Sen så lägger du bara på de olika klasserna såhär:

<ul class="navbar blue"> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> <ul class="navbar green"> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>

Tack!

Följdfråga! Hur funkar det med själva namnen man ger till klasserna. Noterar att det finns tre olika syntaxer som svarar för dem två olika elementen och jag hänger bla inte med på hur .navbar länkar både innehållet i navbar blue och navbar green klasserna. Tänker att det här med klasser fungerar lite annorlunda jämfört med divar som jag är van vid.

Intel 2500k @ 4.2Ghz | Noctua NH-U14S | ASUS P8Z68-V LX | Fractal Design Define R4 | Corsair XMS3 Vengeance 2x4GB DDR3 1600 Mhz | Gigabyte GTX 970 4GB | Fractal Design Newton R2 650W | Samsung 840 EVO 250GB | Seagate SSHD 1TB | Seagate Barracuda 1 TB | Windows 10

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Apr 2010
Skrivet av GreatLinkan:

Tack!

Följdfråga! Hur funkar det med själva namnen man ger till klasserna. Noterar att det finns tre olika syntaxer som svarar för dem två olika elementen och jag hänger bla inte med på hur .navbar länkar både innehållet i navbar blue och navbar green klasserna. Tänker att det här med klasser fungerar lite annorlunda jämfört med divar som jag är van vid.

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/

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!

Trädvy Permalänk
Medlem
Plats
Finland
Registrerad
Maj 2004

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 */ (...) }

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

@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.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2012

Okej, tror jag hajar detta. Så om vi tar klassen "navbar blue" så är navbar en klass och blue en annan? Och när man kodar i CSS och skriver i .navbar så kommer allt man lägger in i den syntaxen att ske överallt där man har angett .navbar som klass, varav förändringen sker i både "navbar blue" och "navbar green"? Och när vi skriver i syntaxen .blue så sker grejerna man lägger in där bara i "navbar blue" då det är där klassen blue endast finns?

Intel 2500k @ 4.2Ghz | Noctua NH-U14S | ASUS P8Z68-V LX | Fractal Design Define R4 | Corsair XMS3 Vengeance 2x4GB DDR3 1600 Mhz | Gigabyte GTX 970 4GB | Fractal Design Newton R2 650W | Samsung 840 EVO 250GB | Seagate SSHD 1TB | Seagate Barracuda 1 TB | Windows 10

Trädvy Permalänk
Medlem
Plats
Finland
Registrerad
Maj 2004

Precis så!

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2012

Perfekt, tack till alla svar!

Intel 2500k @ 4.2Ghz | Noctua NH-U14S | ASUS P8Z68-V LX | Fractal Design Define R4 | Corsair XMS3 Vengeance 2x4GB DDR3 1600 Mhz | Gigabyte GTX 970 4GB | Fractal Design Newton R2 650W | Samsung 840 EVO 250GB | Seagate SSHD 1TB | Seagate Barracuda 1 TB | Windows 10