syntax question

[brien_rtb]

hey all,

I have two spans within a link, e.g.

<div id="mylinks">
<a href=""><span class="span0">first line</span><span class="span1">second line</span></a>
</div>

I want to define different styles for these spans depending on the link state, e.g.

[here's my pseudo CSS]


/* normal styles */

#mylinks a.span0 {
STYLE
}

#mylinks a.span1 {
STYLE
}


/* hover styles */

#mylinks a:hover.span0 {
STYLE
}

#mylinks a:hover.span1 {
STYLE
}


From the the name "cascading, I assume this is possible. But I am totally lost in the syntax ... clarification appreciated.

Many thanks!

[Dan Schulz]

I'd use a list instead of those DIVs and SPANs.

<ul id="mylinks">
    <li><a href="#">first line</a></li>
    <li><a href="#">second line</a></li>
</ul>

And then for the CSS, just style normally, but make sure you add list-style: none; to the #mylinks selector.

And by the way, welcome to SitePoint!

[AutisticCuckoo]

I agree with Dan about the use of a list, but to answer your question, you're almost there. You only need to insert a descendant combinator (a space) between a and the class selector:

#mylinks a .span0 {
STYLE
}
 
#mylinks a .span1 {
STYLE
}
 
 
/* hover styles */
 
#mylinks a:hover .span0 {
STYLE
}
 
#mylinks a:hover .span1 {
STYLE
}

The way you wrote those rules, they would match a link with class span0 etc within an element with ID mylinks.

Since you've attached the class names to spans inside the links, you need to indicate another nesting level.
#mylinks a .span0 selects an element with class span0 that is a descendant of an a element that is a descendant of an element with ID mylinks, which will match your spans.

[brien_rtb]

Cool, thank you both. Simple examples like this really help me get the feel of things ... good to be here

[AutisticCuckoo]

Oh, I didn't look at your post count or join date before replying. A belated Welcome to SitePoint Forums! is in order!