CODEWITHSUNDEEP
csshtml-email
Joseph Moore
Joseph Moore

Reputation: 1

Styling a deeply nested link

I'm struggling to style an anchor in a paragraph in a div in a table row. (I know tables are bad form...this is an email.)

I've tried a lot of syntactical combinations, but I just can't seem to target the link.

HTML

<tr>
  <td class="banner-royal">
    <div class="col-lge">
      <p>
        Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. <a href="http://www.example.com/">Eget accumsan dictum</a> sapien massa, placerat non venenatis et, tincidunt eget leo.
      </p>
    </div>
  </td>
</tr>

CSS

.banner-royal.col-lge p a:link {
  color: #ffffff;
}

Upvotes: 0

Views: 150

Answers (2)

sawacrow
sawacrow

Reputation: 321

Solution 1:

You must use "table" tag as container.

  <table>
    <tr>
        <td class="banner-royal" id="test">
          <div class="col-lge">
            <p>
              Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. <a href="http://www.example.com/">Eget accumsan dictum</a> sapien massa, placerat non venenatis et, tincidunt eget leo.
            </p>
          </div>
        </td>
      </tr>
    </table>

Solution 2: You must use another div container class for select

      <div class="table-container">
    <tr>
        <td class="banner-royal">
          <div class="col-lge">
            <p>
              Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id 
              ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex.
              <a class="acolored" href="http://www.example.com/">Eget accumsan dictum</a> sapien massa, placerat non venenatis et, tincidunt eget leo.
            </p>
          </div>
        </td>
      </tr>
    </div>
 <style>
     /* not working cause "td" selector didnt work. */
     .banner-royal .col-lge p a:link {
  color: red;
}
/* not working cause "td" selector didnt work. */
.banner-royal a {
  color: red;
}
/* is working cause expect TD selector. here using div class selector*/
.table-container  a {
    color:pink;
}
 </style>

I could not understand the reason but if you dont use "table", td class selector is not working.

It must have something to do with the HTML structure or the browser engine

Upvotes: 0

Toni Bordoy
Toni Bordoy

Reputation: 255

As I can see, you have written the classes togther. Try this code instead:

.banner-royal .col-lge p a { color: #ffffff; }

Notice that .banner-royal and .col-lge needs to be written with a space between them.

Also, I think is not necessary to add the pseudoselector a:link. But I do not know if you need it for some reason.

Upvotes: 1

Related Questions