[CSS] Subelement / Selector ?

[Dennis van der Stelt]

Ik ben een beetje wazig op het moment. Misschien mis ik iets. Ik heb gezocht op zowel selector als subelement maar kan nergens echt vinden wat ik bedoel

Ik heb in HTML ongeveer dit:

HTML:

<div id="home">
<h3><a href="link1">hallo allemaal</a></h3>
<div id="feature">
<a href="link2">komt u maar</a>
</div></div>

Nu heb ik een style zo gezet dat link 1 rood wordt.
Meteen daarna gezet dat link2 geel wordt.

Cascading Stylesheet:

#home h3 a:hover { rood }
#home .feature a:hover { geel }

Maar nu is die link1 óók geel. Hoe krijg ik die nu rood en link2 geel?
Wat is daarvoor de juiste CSS?

[ Voor 53% gewijzigd door Dennis van der Stelt op 07-07-2005 10:47 . Reden: [code] tag toegevoegd ]

[Michali]

Die hoort rood te zijn. Laat het hele stukje css eens zien.

[ Voor 7% gewijzigd door Michali op 07-07-2005 10:41 ]

[BtM909]

Als je dan toch met [plain]

HTML:

HTML code (tussen code-tags)

[/] of [plain]

Cascading Stylesheet:

CSS code

[/] gaat smijten, doe het dan compleet. Dat maakt het testen hier ook wat makkelijker

Cascading Stylesheet:

a:hover { color:#FF0000 }
#feature a:hover { color:#FF00FF }

Wat je hieronder zegt, klopt niet:

#home .feature a:hover

Ten eerste is die punt al fout, dat zou dan een # moeten worden, want je zegt nu: een element met id home, gevolgd door een class feature en daarna een a:hover. Da's toch iets andere code dan wat jij hebt

[ Voor 5% gewijzigd door BtM909 op 07-07-2005 10:43 ]

[Verwijderd]

doe eens #feature

[Zoefff]

Cascading Stylesheet:

#home h3 a:hover { 
    color:yellow;
}
#feature a:hover {
    color:red;
}

Oftewel, feature is ook een id, die roep je aan met een #. Je roept hem nu als class aan met een . , en dat gaat natuurlijk niet werken.

[Dennis van der Stelt]

Dit is de hele code...
Zoals je ziet zit er het een en ander in tables enzo. Maar dat zou niet uitmaken?
Ik moet me echt volop in CSS gaan verdiepen!

Maar goed, de originele code was dus niet helemaal juist... Het is inderdaad een class.
Ik _zou_ de html kunnen wijzigen, maar het is een bestaande applicatie waar regelmatig uitbreidingen van komen. Zou erg jammer zijn als ik continue van alles langs moest gaan.

HTML:

<div id="home">             
<table>
    <tr>
        <td valign=top colspan="2">
                
<h3>Featured Article - <a id="boeit_niet" href="link 1">titel</a></h3>
<div class="feature">
    <a id="boeit_niet">[img]"Themes/default/Skins/Blogs/users/avatar.aspx?userid=1017"[/img]</a>Author: <a href="link 2">Dennis</a><br>Mooi verhaal
<a id="boeit_niet" href="link 2"> Read more...</a>
</div>

[ Voor 83% gewijzigd door Dennis van der Stelt op 07-07-2005 11:03 ]

[Verwijderd]

ja ey, hier heb je wel een class feature, dan is het wel een . natuurlijk

verder heb je een paar keer dezelfde id gebruikt, wat natuurlijk ook al niet ok is
misschien is www.w3schools.com/css wel een handige referentie

verder heb je een openings tag van een a teveel

(ik neem aan dat de td, de tr, de table en de eerste div wel afgesloten worden...)

[ Voor 25% gewijzigd door Verwijderd op 07-07-2005 10:58 ]

[Dennis van der Stelt]

Verwijderd schreef op donderdag 07 juli 2005 @ 10:54:
ja ey, hier heb je wel een class feature, dan is het wel een . natuurlijk

Maar toch werkt het niet. Alles wordt dezelfde kleur.

Verwijderd schreef op donderdag 07 juli 2005 @ 10:54:verder heb je een paar keer dezelfde id gebruikt, wat natuurlijk ook al niet ok is

Nee, die genereert ASP.NET voor me. Maar die zijn zo lang dat ik ze ff vervangen heb.

Verwijderd schreef op donderdag 07 juli 2005 @ 10:54:verder heb je een openings tag van een a teveel

(ik neem aan dat de td, de tr, de table en de eerste div wel afgesloten worden...)

Die openingstag hoort er niet. Ik heb wat aan de html zitten sleutelen om het leesbaarder te maken. En ja, alles wordt netjes afgesloten.

Maar, nog steeds werkt het dus niet. Enig idee?

[Copyman]

Cascading Stylesheet:

.home a:hover {
    color: yellow;
}
.home #feature a:hover {
    color: red;
}

en

HTML:

<div class="home">
    <h3><a href="link1">hallo allemaal</a></h3>
    <div id="feature">
        <a href="link2">komt u maar</a>
    </div>
</div>

Moet werken dacht ik zo.

En om ff goed tussen je oren te knopen: een ID binnen een Class gaat beter werken dan een Class binnen een ID.

[ Voor 53% gewijzigd door Copyman op 07-07-2005 11:52 ]

[Dennis van der Stelt]

Alleen is home een id en feature een class, dus moet het nét andersom!
En ik begrijp je reactie op id en class, maar het is mijn html niet. Het komt van een pakket waar ik de css van aan het aanpassen ben, en als ik de html aan ga zitten passen, blijf ik elke release dat opnieuw doen.

Maar ik ga 't nogmaals thuis proberen. Vanavond of morgen het resultaat!
En ik ben inmiddels w3school aan het bestuderen!

[ Voor 41% gewijzigd door Dennis van der Stelt op 07-07-2005 11:34 ]

[Zoefff]

Copyman schreef op donderdag 07 juli 2005 @ 11:30:
En om ff goed tussen je oren te knopen: een ID binnen een Class gaat beter werken dan een Class binnen een ID.

Euh, dat is toch precies andersom

ID's zijn uniek op een pagina. Vaak gebruikt om grote blokken aan te geven en te stylen, of (logisch) unieke elementen. Classes hoeven niet uniek te zijn, vaak gebruikt om bijvoorbeeld een terugkerend stijlelement toe te passen op verschillende elementen.

Logischer zou dan zijn dat een class binnen een ID beter werkt dan een ID binnen een class toch?

[Copyman]

Hmm, als je http://www.htmldog.com/guides/cssintermediate/classid/ mag geloven wel ja.

Dan heb ik het mijzelf "verkeerd" aangeleerd zo blijkt. Maar ik heb er nooit problemen mee ofzo. Komt vast door OOP.

Edit:

Cascading Stylesheet:

#home a:hover {
    color: yellow;
}
#home .feature a:hover {
    color: red;
}

HTML:

<div id="home">
    <h3><a href="link1">hallo allemaal</a></h3>
    <div class="feature">
        <a href="link2">komt u maar</a>
    </div>
</div>

Zo werkt het ook idd.

[ Voor 63% gewijzigd door Copyman op 07-07-2005 11:49 ]

[Verwijderd]

vergeet niet dat classes en id's beiden geen zak met styling te maken hebben (ja, ik vind dat het artikel dat hierboven genoemd wordt de plank mis slaat)

en over wat "beter" werkt (ik neem aan dat het over specificity gaat), zie
http://www.w3.org/TR/CSS21/cascade.html#specificity

[ Voor 24% gewijzigd door Verwijderd op 07-07-2005 13:17 ]