CSS selectors tutorials?

Hey

I was building a website recently and I realised I don’t have much knowledge on CSS selectors, inheritence etc.

For example:


<div class="menu">
        <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li class="active"><a href="">3</a></li>
            <li class="sub1 active" ><a href="">3.1</a></li>
            	<li class="sub2"><a href="">3.11</a></li>
                <li class="sub2"><a href="">3.12</a></li>
            <li class="sub1" ><a href="">3.2</a></li>
        <li><a href="">4</a></li>
        </ul>
</div>

This selects the li element, but if I leave the li off, it doesn’t work, or if I put the li after, it doesn’t work either, but would it work if I but the an a element begore .sub1, or after, etc. (THIS IS NOT A QUESTION)


li.sub1 {
margin:0 0 0 10px;
}

Well, what I am trying to say is that, I am a newcomer and want to know more about the advanced CSS selectors.
I have tried google, but I haven’t found anything useful really, only these basics written again on thousands and thousands of pages.
I ask because I want to know if there are any material on this, before I’m going to test everything myself.

Have you tried looking at the CSS selector section of our CSS reference site:

More specifically the page on descendant selectors: http://reference.sitepoint.com/css/descendantselector

PS in your example,

.sub1

alone should work just as well as

li.sub1

Hi, I don’t know what the point of this threadi s (besides knowing some more advanced selectors) so I’ll just post some and go over them :slight_smile:


#element + p.something .intimidating > .selector{/*something*/}

That will select an element with the class=“selector” which is a direct child of .intimidating. And that .intimidating element is a child of a <p> with class=“something” and that element is adjacent to an element with id=“element”. Something like this HTML :slight_smile:


<div id="element">
<p class="something">
<a href="#" class="intimidating"><span class="selector">text</span></a>
</p>
</div>

You might want to try SelectOracle: it gives you a translation of what a complicated selector targets. Comes in handy when you’re not sure if the selector is well written.

Another reason why a selector doesn’t do what you want could be because of specificity and inheritance: you can start here

I’d like to make an amendment to my code above. I use + above and I acidently nested the <p> inside the <div>

Here is the updated HTML. Sorry about this (and thanks to Luki for posting and thus me looking over my code again)

<div id="element"></div>
<p class="something">
<a href="#" class="intimidating"><span class="selector">text</span></a>
</p>

It should do. There might be a specificity issue though.

Thanks for the replies.
It can get rather complicated quickly, using the CSS selectors.
If there were some data/visual representation other then the page itself of the selectors and properties.
I have no idea how complicated would it be tough, to build something like this.

So as a conclusion of the topic if anyone wants some info then:

http://gallery.theopalgroup.com/selectoracle/

http://css.maxdesign.com.au/selectutorial/

You might also want to look into the whole cascade,inheritance and specificity section which is also relevant.

It is complicated at first but most of it is logical after you have practised a few times :slight_smile:

I already provided that link to the OP Paul :smiley:

Aargh - sorry - I’m an idiot:)

Oops, that’s not what mend to imply … now i feel like an idiot :blush: :blush:

I’m glad i’ve set you on the right path, young padawan :smiley: