addressing sub elements in css

[brentnicholas]

Howdy all -

So I'm a little unsure about how you address(style) sub elements via css. This area always confuses me...

I have the following spans:

<span class="tabsOCBox">Stations List: <span id="stationListOpen">Open</span><span id="stationListClose">Close</span></span>

<span class="tabsOCBox">Station Details: <span id="stationDetailsOpen">Open</span><span id="stationDetailsClose">Close</span></span>

And the following styles:

// works great and sytles both 'tabsOCBox'
.tabsOCBox{
background-color: #ffffff;
border: 1px solid #000000;
width:100%;
}

// I'd like to style the inner spans as such, but I don't think I'm addressing it right
.tabOCBox span{
border-top:2px solid #c0c0c0;
border-left:2px solid #c0c0c0;
}


Thoughts?

Thanks for you time!
BN

[Twey]

No, that's quite right.

[brentnicholas]

hmmm... that's odd. It doesn't work

I broke it out into seperate selectors for each inner span, that worked.. but isn't ideal.

I'll monkey with it a bit...

BN

[TheJoshMan]

depending on what the rest of your css looks like, there maybe something declared later in the css which is overriding the styles you are trying to apply. Look for other rules which have the same class or id in your css... If there are any, they may be preventing you from styling it the way you want.

[rangana]

No, I don't think it will work. The declaration does'nt address to any element that you are showing unto us.

There is no element whose class name is tabOCBox.

Maybe you mean tabsOCBox:

.tabsOCBox span{
border-top:2px solid #c0c0c0;
border-left:2px solid #c0c0c0;
}

Hope it helps.