What's the difference between the following declaractions? a.Content { background: #FFFFFF; } .Content A { background: #FFFFFF; } I've noticed that ".Content A" works when specifying a style for a table-data <td> tag but doesn't work for specifying a style for an HREF. On the other hand, "a.Content" works for HREFs but not for tables. Can anyone explain? Thanks
This will select all A elements with the attribute CLASS set to "Content". For example, <a href="Blah" class="Content">Blah</a> Code (markup): This will select any A element that is a decendant of any other element with the attribute CLASS set to "Content". For instance, <p class="Content"> <a href="Fee">Fee</a> </p> <div class="Content"> <p> <span><a href="Fi">Fi</a></span> </p> </div> <table> <tr> <td class="Content"><a href="Fo">Fo</a></td> </tr> </table> [color=red]This next example will not be selected; the A element is not a decendant of itself[/color] <p><a href="Fum" class="Content">Fum</a></p> Code (markup):
Yes, they are two different types of CSS selectors. The first one (a.Content) specifies all anchor tags that have a class of "Content". The second one (.Content A), selects all anchor tags found within any other tag of class "Content". It will work if you have P, DIV, or any other elements, as long as their class is "Content". Hope this helps.