CODEWITHSUNDEEP
css
Aaron Kennedy
Aaron Kennedy

Reputation: 1

Descendant selector help CSS

Very new to HTML and CSS but trying to learn a new skill.

I am trying to select the "Read More" anchor tag nested inside an anchor and an li tag.I cannot seem to work out the descendant selector that will select this tag in CSS. Any help would be appreciated. I would like to do this without adding any additional classes or ID's.

The code is below.

`<ul>
  <li class="Directory">
   <a href="#">
    <img class="icon" src="images/folder.png">
    <h4>Directory</h4>
    <h5>Map View, Locations,<br>Companies,Vendors</h5>
    <img class="line" src="images/line.png">
    <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum.   Nam pretium fringilla dignissim.</p>
    <a href="#" >Read More</a>
   </a>`

Upvotes: 0

Views: 46

Answers (2)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

In this case you can use: :last-child

Something like this:

ul li.Directory a:last-child {
  border: solid 1px #000000;
}
<ul>
  <li class="Directory">
    <a href="#">
      <img class="icon" src="images/folder.png">
      <h4>Directory</h4>
      <h5>Map View, Locations,<br>Companies,Vendors</h5>
      <img class="line" src="images/line.png">
      <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p>
      <a href="#">Read More</a>
    </a>
  </li>
</ul>

If you need to change the link appearance you can add :link. Something like this:

ul li.Directory a:last-child:link {
  border: solid 1px #000000;
  padding: 5px;
  text-decoration: none;
}
<ul>
  <li class="Directory">
    <a href="#">
      <img class="icon" src="images/folder.png">
      <h4>Directory</h4>
      <h5>Map View, Locations,<br>Companies,Vendors</h5>
      <img class="line" src="images/line.png">
      <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p>
      <a href="#">Read More</a>
    </a>
  </li>
</ul>

Btw, it's a good practice validate your markup. I'd like to recommend you the next links:

This is very important because it helps us to follow the W3C standards significantly, and avoid compatibility problems between browsers.

Upvotes: 0

dmontooth
dmontooth

Reputation: 91

As Danny pointed out, you can use a:last-child to target it. I agree with makshh that you shouldn't nest an a inside an a. One thing I would suggest is reducing the specificity of the target though. Here's a good read on why it's important to do so and an updated example:

Strategies for keeping CSS specificity low

.Directory a:last-child {
  border: solid 1px #000000;
}
<ul>
  <li class="Directory">
    <a href="#">
      <img class="icon" src="images/folder.png">
      <h4>Directory</h4>
      <h5>Map View, Locations,<br>Companies,Vendors</h5>
      <img class="line" src="images/line.png">
      <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p>
      <a href="#">Read More</a>
    </a>
  </li>
</ul>

Upvotes: 1

Related Questions