• Ga naar profiel

ilias op 05 april 2010 #

Stel ik heb een navigatiemenu in de header die ik heb opgebouwd met behulp van een lijst.

<div id="header"> </p><ul><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li></ul><p></div>

</p><p>div#header ul>li{
float: left;
}
div#header ul>li a{
display: block;
width: 100px;
height: 50px;
background-color: red;
}

Allemaal goed en wel maar stel ik wil voor elk menu-item een andere achtergrondkleur dan zal ik nog specifieker moeten zijn en een "id" moeten gebruiken.
De CSS zou er dan vb. zo uit kunnen zien:

div#header ul>li{
float: left;
}
div#header ul>li a{
width: 100px;
height: 50px;
}
div#header ul>li#home a{
width: 100px;
height: 50px;
float: left;
background: red;
}
div#header ul>li#about a{
width: 100px;
height: 50px;
float: left;
background: blue;
}
div#header ul>li#contact a{
width: 100px;
height: 50px;
float: left;
background: green;
}

Maar ik kan ook zeggen:
ul>li#id a{ }
li#id a{ }
#id a{ }

Mijn vraag is nu: wanneer weet je hoe specifiek je moet zijn in je selector?

Je kan nog extremer gaan door te zeggen:
html>body div#container div#header ul>li#contact a{ }

Maar wanneer heeft dit zin?

• Ga naar profiel

ilias op 05 april 2010 #

Ik zie dat de html-code in de eerste post gewoon is gegenereerd (geparset?).
Is er geen manier om html-code weer te geven?
Oh ja, als iemand zo vriendelijk zou willen zijn om te zeggen waar de knop zit die me mijn posts laat aanpassen zit..

Edit: gevonden! (zat achter mijn avatar)

• Ga naar profiel

johnkeates op 05 april 2010 #

Het heeft zin zodra je met een minder specifieke selector meer zou selecteren dan dat je wil. Zelf ga ik altijd voor medium (element + id).

• Ga naar profiel

nLz op 05 april 2010 #

Ik zeg altijd hoe korter hoe beter.. Is ook sneller! Als je op je menuitems ID's gebruikt kan je in principe alleen de ID als selector gebruiken, omdat een ID altijd uniek moet zijn in je HTML en dus geen conflicten kan geven met andere selectors..

#home a { }

Ik zou zelf kiezen om een class op de li's te zetten met de naam van de link.

#header ul li.home a { }

• Ga naar profiel

Martens op 06 april 2010 #

Er is niet echt een 'beste' manier om dit te doen. Er zijn natuurlijk wel best practices, maar het komt ook aan op persoonlijke smaak.
Een best practice is om je selectors zo klein mogelijk te houden, dus bijvoorbeeld #header li in plaats van div#header ul>li. Zo houd je je code overzichtelijk en verzand je niet in styling-problemen als je straks iets specifiekers nodig hebt (met enorme paden, !importants en dat soort chaos).
Een mooi voorbeeld van persoonlijke smaak (in dit geval die van mij) is: gebruik class-namen voor styling en id's voor unieke elementen die je via JavaScript wilt manipuleren.

• Ga naar profiel

UsurPia op 06 april 2010 #

ik ben van mening dat je heel algemeen moet beginnen met de opbouw je css en steeds verder specificeren indien nodig. dan gebruik je het watervalletje (cascading) optimaal. hoe specifieker je te werk gaat, hoe meer je moet definiëren.

gebruik daarom zoveel mogelijk de html-elementen of classes en als je heel specifiek te werk gaat een id of een uitgekauwd pad. ik gebruik een id doorgaans alleen voor elementen waarvan ik weet dat ze toch maar één keer voorkomen (zoals een logo, een menu, etc).

• Ga naar profiel

Jakko Westerbeke op 06 april 2010 #

UsurPia - op 06 april 2010ik gebruik een id doorgaans alleen voor elementen waarvan ik weet dat ze toch maar één keer voorkomen (zoals een logo, een menu, etc).

Een id moet dan ook uniek zijn op de pagina … wil je één stukje opmaak toepassen op meerdere elementen, dan moet je volgens de regels dat óf aan een HTML-element toewijzen, óf class gebruiken — nooit id. Probeer maar eens een pagina te valideren met twee keer dezelfde id erin.

• Ga naar profiel

UsurPia op 06 april 2010 #

Jakko Westerbeke - op 06 april 2010Een id moet dan ook uniek zijn op de pagina … wil je één stukje opmaak toepassen op meerdere elementen, dan moet je volgens de regels dat óf aan een HTML-element toewijzen, óf class gebruiken — nooit id. Probeer maar eens een pagina te valideren met twee keer dezelfde id erin.

Beetje overbodig vind je niet? Natuurlijk is een id uniek, anders kan het toch nooit een identifier zijn? En natuurlijk valideert een pagina niet als je twee of meer keer hetzelfde id er in hebt zitten. Lijkt me ook niet meer dan logisch.

Daarom zeg ik ook in mijn bericht: ik gebruik alleen een id als ik weet dat ze één keer voor komen, ergo: als ze uniek zijn. Doorgaans is een menu of een logo dat ook.

• Ga naar profiel

Melgior op 06 april 2010 #

Als je dus ID's gebruikt als CSS selector, heeft het verder geen enkele zin om je selector nog specifieker te maken. #elementId volstaad dus in dit geval.

Gebruik je geen id maar een klasse of de naam van het html element, dan is het handig om wel specifieker te zijn. Zo voorkom je dat de stijl op de verkeerde plek wordt toegepast en (ook niet onbelangrijk) je houd je CSS code zo leesbaar voor jezelf en anderen die aan het project werken.

• Ga naar profiel

Jakko Westerbeke op 06 april 2010 #

UsurPia - op 06 april 2010Beetje overbodig vind je niet?

Ik wel, maar je zou ze de kost moeten geven die id gebruiken alsof het class is.