Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

124151155

macrumors regular
Original poster
Jan 9, 2008
204
0
Hey,
I was just writing some html & css for a site today and I came across what, well, I thought was a problem but perhaps I'm just not doing it right.
So in css, I can style a class like this:

Code:
ul a {...}
#mylist a {...}
.special .link {...}

but can I do it something more like this:

Code:
p .special {...}

Basically I'm just trying to target anything with the .special class that is in a <p> tag.

I always thought you could, but I guess I was wrong, and I just had never done it, as I'm writing in Coda and it really doesn't seem to be doing anything.

Can somebody fill me in on how this can be done?

Cheers.
 
By "target anything with the .special class that is in a <p> tag" do you mean ant tag inside the p tag that has that class, or any p tag with a class of special? If you need to target p tags with the special class do,
Code:
p.special
with no space between it and the class name. This accommodates <p class="special">.
 
Code:
p .special {...}

This will match an element of class="special" which is a descendant of the <p> tag no matter what that element's parent is.

Whereas

Code:
p.special {...}

will only match a <p> tag if it has a class of special.

So, in theory what you're trying to do should work. In practice though, which style rules are ultimately applied to a tag can depend on several things including the order of the declarations and how the style rules cascade.

Here's a list of CSS selectors you may find useful. Also, if you're using a Mac you should try CSS Edit. I find it invaluable for testing declarations.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.