Styling a deeply nested link-CodePudding

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 >
    <div >
      <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;
}

CodePudding user response：

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.

CodePudding user response：

Solution 1:

You must use "table" tag as container.

  <table>
    <tr>
        <td  id="test">
          <div >
            <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 >
    <tr>
        <td >
          <div >
            <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>
    </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