list element, class moet boven de id gaan?

[Saven]

Hello,
Beetje vage titel maar kan het niet echt beter verwoorden.

Ben bezig met een menuutje voor een website. Hiervoor gebruik ik een list, en met css zorg ik dat die wordt vormgegeven.

Nu is het zo dat ik een menuknop ook als 'active' wil kunnen weergeven: de pagina waar de gebruiker op zit, daarvan moet de menuknop een ander kleurtje krijgen.

Nu dacht ik makkelijk te zijn door een class mee te geven, maar het lijkt er op dat die class wordt genegeerd, want er verandert niks. Heb al !important proberen mee te geven in de class maar dat lukte niet.

Mijn html:

HTML:

            <div id="topmenu">
                <ul>
                    <li><a href="#" class="topmenu-active">Beginpagina</a></li>
                    <li><a href="#">Beginpagina</a></li>
                    <li><a href="#">Beginpagina</a></li>
                    <li><a href="#">Beginpagina</a></li>
                    <li><a href="#">Beginpagina</a></li>
                    <li><a href="#">Beginpagina</a></li>
                </ul>
            </div>

Mijn css

Cascading Stylesheet:

#topmenu ul
{
    list-style-type: none;
    margin: 0px;
    margin-left: 10px;
    padding: 0px;
}

#topmenu ul li
{
    color: #fff;
    float: left;
    font-size: 14px;
    margin-right: 20px;
    margin-top: 15px;
}

#topmenu ul li a:link, #topmenu ul li a:visited
{
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    
    background: #5c5c5c; /* Old browsers */
    background: -moz-linear-gradient(top,  #5c5c5c 0%, #262626 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#262626)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* IE10+ */
    background: linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#262626',GradientType=0 ); /* IE6-9 */

    
    padding: 6px 9px 6px 9px;
}

#topmenu ul li a:hover, #topmenu ul li a:active
{
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    
    background: #34a6fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #34a6fd 0%, #2271ad 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34a6fd), color-stop(100%,#2271ad)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* IE10+ */
    background: linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6fd', endColorstr='#2271ad',GradientType=0 ); /* IE6-9 */
    
    padding: 6px 9px 6px 9px;
}

.topmenu-active
{
    background: #34a6fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #34a6fd 0%, #2271ad 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34a6fd), color-stop(100%,#2271ad)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* IE10+ */
    background: linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6fd', endColorstr='#2271ad',GradientType=0 ); /* IE6-9 */
}

Ik wil dus met de class .topmenu-active de achtergrondkleur laten veranderen van #topmenu ul li a:link, #topmenu ul li a:visited

Zoals ik al aangaf werkt !important achter de background's zetten in de .topmenu-active helaas niet.
Iemand anders een idee?

[FrameWork.]

Dit bedoel/wil je?

[Daanoz]

Probeer eens:

#topmenu ul li a.topmenu-active

of (voor dezelfde stijl als de hover)

#topmenu ul li a:hover, #topmenu ul li a:active, #topmenu ul li a.topmenu-active

[ Voor 2% gewijzigd door Daanoz op 01-06-2012 14:57 . Reden: foutje ]

[truegrit]

Je css selector voor de class is niet specifiek genoeg. Een class gaat nooit boven een ID uit, ongeacht de volgorde in het bestand.

Lees dit voor meer informatie: http://css-tricks.com/specifics-on-css-specificity/

[Saven]

Inderdaad ik merkte het. Bedankt voor je link. Oplossing van FrameWork. werkt goed Thanks!

[OkkE]

Nog wat interessant leesvoer: Keep your CSS selectors short

[ Voor 18% gewijzigd door OkkE op 01-06-2012 15:10 ]

[bartbh]

Het is a.active en geen a:active.

Met a.active selecteer je een achor met een class "active". Met a:active en achor met de state "active".

toevoeging:

De active state is als de link/knop ingedrukt is, dus niet de actieve pagina.

[ Voor 87% gewijzigd door bartbh op 01-06-2012 15:34 ]

[OkkE]

bartbh schreef op vrijdag 01 juni 2012 @ 15:23:
Het is a.active en geen a:active.

Met a.active selecteer je een achor met een class "active". Met a:active en achor met de state "active".

toevoeging:

De active state is als de link/knop ingedrukt is, dus niet de actieve pagina.

Het kan .active zijn, maar de TS heeft daar een andere classname (topmenu-active) voor gebruikt.

Verder heb je de volgende pseudo-selectors:

1. :link = De default styling van een link (wordt vrijwel altijd weggelaten).
2. :hover = De onMouseOver styling van een link.
3. :active = De onMouseDown styling van een link.
4. :visited = Een link die ooit bezocht is (hoewel je daar weinig style aan kan hangen).

Over het algemeen, is mijn ervaring, wordt vooral 1 + 2 gebruikt. Verder niet.

R4gnax schreef op vrijdag 01 juni 2012 @ 18:10:
[...]

Je vergeet :focus. Het keyboard equivalent van :hover.

Inderdaad, oeps! Het was ook voor mij vrijdag middag.

[ Voor 13% gewijzigd door OkkE op 04-06-2012 08:30 ]

[R4gnax]

OkkE schreef op vrijdag 01 juni 2012 @ 15:48:
[...]

Het kan .active zijn, maar de TS heeft daar een andere classname (topmenu-active) voor gebruikt.

Verder heb je de volgende pseudo-selectors:

1. :link = De default styling van een link (wordt vrijwel altijd weggelaten).
2. :hover = De onMouseOver styling van een link.
3. :active = De onMouseDown styling van een link.
4. :visited = Een link die ooit bezocht is (hoewel je daar weinig style aan kan hangen).

Over het algemeen, is mijn ervaring, wordt vooral 1 + 2 gebruikt. Verder niet.

Je vergeet :focus. Het keyboard equivalent van :hover.

[Wiethoofd]

Als je last hebt van een ID die te zwaar weegt, maak er dan gewoon een class van, dan kan je em later veel makkelijker door een iets specifiekere regel toch stijlen hoe jij wilt.

En zolang je consequent die class als "ID" behandelt is er niets aan de hand en heb je geen ranzige oplossingen zoals extra id's of !importants nodig.

Misschien even leuk om te lezen: CSS Wizardry - When using IDs can be a pain in the class…

[BtM909]

Wiethoofd schreef op dinsdag 05 juni 2012 @ 13:04:
En zolang je consequent die class als "ID" behandelt is er niets aan de hand en heb je geen ranzige oplossingen zoals extra id's of !importants nodig.

Klopt er is niks aan de hand, maar dan kan je net zo goed alles weer met divjes en spacers gaan verHTMLen

oud, maar nog steeds true: http://www.rikkertkoppes.com/thoughts/2004/11/19/

[Barryvdh]

Ik vind er ook wel iets voor te zeggen om je CSS niet alleen maar te cascaden en per id te doen, maar om juist 'standaard' css structuren te maken, en duidelijker in de markup aan te geven wat je functie is.
Dus gewoon de ul onder #topmenu de class .nav (bijvoorbeeld)
Dan krijg je alleen .nav a / .nav a.active / .nav a:hover etc

[BtM909]

Of gewoon HTML5 en dan de structuur stylen

[Barryvdh]

Ja, maar dat gaat dus wel alleen als je maar 1 nav element hebt, of je moet weer dingen als header > nav gaan doen. (Kan ook prima natuurlijk, maar dan moet je weer opletten dat je niet per ongeluk iets teveel styled of verplaatst)

[ Voor 56% gewijzigd door Barryvdh op 07-06-2012 12:51 ]

[R4gnax]

Barryvdh schreef op donderdag 07 juni 2012 @ 12:48:
Ja, maar dat gaat dus wel alleen als je maar 1 nav element hebt, of je moet weer dingen als header > nav gaan doen. (Kan ook prima natuurlijk, maar dan moet je weer opletten dat je niet per ongeluk iets teveel styled of verplaatst)

En daarom dus de OOCSS aanpak met pseudo-inheritance.

Cascading Stylesheet:

.nav {}
.nav-main { }
.nav-associates {}

HTML:

<ul class="nav nav-main">

[Barryvdh]

Klopt, maar het ging er dus met alleen (html5) elementen minder makkelijk ging, zonder alsnog classes aan te gaan geven.
Kan me ook wel vinden in het minder cascaden van alles, en wat meer classes aangeven, voor het doel, zoals Mark Otto beschrijft; http://www.markdotto.com/2012/03/02/stop-the-cascade/
(Al gebruik ik tegenwoordig meestal LESS, dus dan kan je nesten en is iig je code een stuk overzichtelijker in dit soort gevallen)

[crisp]

R4gnax schreef op donderdag 07 juni 2012 @ 13:00:
[...]

En daarom dus de OOCSS aanpak met pseudo-inheritance.
[...]

Als je geen IE6 hoeft te ondersteunen zou ik dat pseudo gewoon weglaten:

Cascading Stylesheet:

.nav {}
.nav.main { }
.nav.associates {}

HTML:

<ul class="nav main">

[OkkE]

crisp schreef op donderdag 07 juni 2012 @ 13:20:
[...]

Als je geen IE6 hoeft te ondersteunen zou ik dat pseudo gewoon weglaten:

Cascading Stylesheet:

.nav {}
.nav.main { }
.nav.associates {}

HTML:

<ul class="nav main">

Het is eigenlijk vrijwel het zelfde; ofwel, het kan beide door elkaar gebruikt. Waarom ik zelf over het algemeen R4gnax zijn manier gebruik, is omdat ".nav-main" mij direct vertelt dat het om navigatie gaat, terwijl ".main" dat niet perse doet. Maar dit is denk ik meer een kwestie van voorkeur/afspraak.

Barryvdh schreef op donderdag 07 juni 2012 @ 13:17:
(Al gebruik ik tegenwoordig meestal LESS, dus dan kan je nesten en is iig je code een stuk overzichtelijker in dit soort gevallen)

Pas wel op met LESS (en andere processors); het lijkt binnen LESS allemaal heel netjes, terwijl wanneer je de uiteindelijke CSS bekijkt, er soms toch soms heel veel onnodige en/of dubbele css-rules in staan...

[BtM909]

Pas wel op met LESS (en andere processors); het lijkt binnen LESS allemaal heel netjes, terwijl wanneer je de uiteindelijke CSS bekijkt, er soms toch soms heel veel onnodige en/of dubbele css-rules in staan...

LESS and SASS zijn gemaakt voor de devver, niet voor de bezoeker (en de browser komt er heus wel uit met z'n RTL parser)

[OkkE]

BtM909 schreef op donderdag 07 juni 2012 @ 14:20:
[...]

LESS and SASS zijn gemaakt voor de devver, niet voor de bezoeker (en de browser komt er heus wel uit met z'n RTL parser)

Het was een tip die ik wilde mee geven in dit topic voor mensen die net met LESS / SASS / etc beginnen. Het is een prima tool, maar het kan geen kwaad om te weten dat de uiteindelijke CSS soms minder optimaal is.

Als je niet oppast kan je zonder het echt door te hebben vrij snel dingen als dit krijgen:

Cascading Stylesheet:

/* Code can CSS kleurtjes aan :*/
.foo .bar .foobar .lorem .ipsem ul li p { ... }

of

Cascading Stylesheet:

.foo { /* 10 regels CSS */ }
...
.bar { /* zelfde 10 regels nogmaals */ }
...
.foobar { /* weer de zelfde */ }

Misschien vind jij dat geen probleem, maar ik heb het liever niet in de CSS.

[ Voor 10% gewijzigd door BtM909 op 07-06-2012 14:41 ]

[BtM909]

OkkE schreef op donderdag 07 juni 2012 @ 14:38:
[...]
Misschien vind jij dat geen probleem, maar ik heb het liever niet in de CSS.

Dat heb ik niet gezegd, gebruik het zelf ook niet.

Er zitten wel degelijk voordelen aan dit soort tools (waar CSS van kan leren voor toekomstige versies)... Aan de andere kant is de vertaalslag naar iets optimaals iets totaal anders dan de tooling en / of techniek. De vertaalslag naar efficiëntere of betere / mooie CSS is iets wat niet af doet van de functionaliteit wat ze met LESS / SASS willen bereiken

[418O2]

ik heb nog nooit gezien dat "slechte"/"Dirty" css een pagina vertraagde. Ik ga zelf dus voor leesbaarheid en onderhoudbaarheid boven snelheid.

Nu maakt less ook lelijke css (als je nest), maar als ik zelf CSS dan schrijf ik ook meer uit dan strikt noodzakelijk.

[OkkE]

BtM909 schreef op donderdag 07 juni 2012 @ 14:43:
[...]

Dat heb ik niet gezegd, gebruik het zelf ook niet.

Er zitten wel degelijk voordelen aan dit soort tools (waar CSS van kan leren voor toekomstige versies)... Aan de andere kant is de vertaalslag naar iets optimaals iets totaal anders dan de tooling en / of techniek. De vertaalslag naar efficiëntere of betere / mooie CSS is iets wat niet af doet van de functionaliteit wat ze met LESS / SASS willen bereiken

Zeker, er zitten voordelen aan; ik gebruik zelf ook LESS.

Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven. Je schrijft een mixin (1 regel) of je nest wat, maar je uiteindelijke CSS wordt 4x zo groot...

[BtM909]

OkkE schreef op donderdag 07 juni 2012 @ 14:48:
Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven.

En mijn punt is dat dat te optimaliseren valt (vandaag al door jou of een ander )

Ik denk alleen omdat de browsers daar weinig tot geen last van hebben, dat het daarom maar geen hoge prio heeft

[OkkE]

BtM909 schreef op donderdag 07 juni 2012 @ 14:51:
En mijn punt is dat dat te optimaliseren valt (vandaag al door jou of een ander )

Kan denk ik geen kwaad mensen af en toe te wijzen op de in-efficientie van zulke processors.

Ik denk alleen omdat de browsers daar weinig tot geen last van hebben, dat het daarom maar geen hoge prio heeft

Browsers lijken er vrij weinig problemen mee te hebben, klopt. Maar neemt natuurlijk niet weg dat je je CSS nog steeds zo efficient mogelijk wil bouwen. Bijkomend voordeel: zo min mogelijk nesten en zo min mogelijk CSS dubbel schrijven is (vind ik) nog een stuk makkelijker te onderhouden en debuggen ook.

Overigens geef ik ook direct toe dat ik misschien wat te veel met dit onderwerp bezig ben, omdat mijn vorige werkgever(s) heel front-end als niet belangrijk zag(en); PHP telde alleen

[418O2]

OkkE schreef op donderdag 07 juni 2012 @ 14:48:
[...]

Zeker, er zitten voordelen aan; ik gebruik zelf ook LESS.

Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven. Je schrijft een mixin (1 regel) of je nest wat, maar je uiteindelijke CSS wordt 4x zo groot...

Less kan zelf minimizen, dat scheelt dan weer wel.

JS is wel goed om te optimizen, voor CSS geloof ik daar niet zo in.

[BtM909]

418O2 schreef op donderdag 07 juni 2012 @ 15:09:
JS is wel goed om te optimizen, voor CSS geloof ik daar niet zo in.

CSS optimaliseren is hier in de context van LESS / SASS (en daar is wel eea aan te optimaliseren)...