CODEWITHSUNDEEP
htmlcssclasscss-selectors
szab.kel
szab.kel

Reputation: 2536

Multiple CSS class, with a element

I have links in a table.
like: 

<table>
 <tr>
   <td><a href="lalala"></a></td>
   <td><a href="lalala"></a></td>
   <td><a href="lalala"</a></td>
   <td><a href="lalala"></a></td>
 </tr>
</table>

I want to use mutliple classes:

<td class="XYtableItem itemID"><a href="lalala" /></td>

The problem is: I cant reach the a elements in CSS I tried these:

.XYtableItem a {}
a.XYtableItem {}
XYtableItem > a {}

none of these works. I dont rly know this should work or not. +I cant put classes to the a elements, but doesnt matter, not working eiter.

Upvotes: 0

Views: 582

Answers (5)

Ash
Ash

Reputation: 128

<style>
    td.aaa a {
        color: green;
    }
    td.bbb a {
        color: yellow;
    }
</style>

<table>
    <tr>
        <td class="XYtableItem aaa"><a href="lalala">aa</a></td>
        <td class="XYtableItem bbb"><a href="lalala">bb</a></td>
    </tr>
</table>

The above works for me. (Although I have had some problems with some styles like padding etc when using on a tags on IE)

Upvotes: 0

Kyle
Kyle

Reputation: 67244

There are some problems with your HTML, 

<table>
 <tr>
   <td><a href="lalala">Link</a></td>
   <td><a href="lalala">Link2</a></td>
   <td><a href="lalala">Link3</a></td>
   <td><a href="lalala">Link4</a></td>
 </tr>
</table>

And the selectors should be very simple.

Check this example.

Upvotes: 0

Teja Kantamneni
Teja Kantamneni

Reputation: 17482

As other answers suggest, most probably your style might be overriding by something else.. You firebug to inspect the element and trace the style.. it should show you what exactly is being overridden by which style..

Upvotes: 0

detaylor
detaylor

Reputation: 7280

The first rule should match as that selects any a element that is the descendant of an element with the XYtableItem class.

The second rule will any a with the class XYtableItem and the third any a element that is a descendant of a XTtableItem element - possibly just missing the class selector (.).

Try adding content to your a tag as it shouldn't be self closing.

Example at http://jsfiddle.net/mfhHG/

Upvotes: 1

Daniel
Daniel

Reputation: 23359

They should work, out of curiosity what CSS rules are you trying to apply to the link ? Bare in mind that there may be some other rules in the CSS overriding your ones, giving you the impression you're not targeting the link correctly. 

.XYtableItem a

This one should be good

Upvotes: 1

Related Questions