Assistance with descendant selectors in CSS

Just starting out with HTML and CSS and eager to learn a new skill.

I'm attempting to target the "Read More" anchor tag that is nested within an anchor and li tag. I've been struggling to figure out the descendant selector in CSS that will allow me to select this specific tag. Any assistance would be greatly appreciated. Ideally, I'd like to achieve this without adding any extra classes or IDs.

The code can be found 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>`
css

Answer №1

One valid point raised by Danny is the use of a:last-child to effectively target it. I fully concur with makshh's opinion that nesting an anchor tag inside another one is not recommended. However, I would recommend decreasing the specificity of the target. For more insights on the importance of this approach, check out this informative article:

Enforcing strict CSS specification practices

.Files a:last-child {
  border: solid 1px #000000;
}
<ul>
  <li class="Files">
    <a href="#">
      <img class="icon" src="images/document.png">
      <h4>Document</h4>
      <h5>Downloads, Reports,<br>Invoices,Receipts</h5>
      <img class="line" src="images/line.png">
      <p>Mauris vel quam id risus imperdiet rhoncus.</p>
      <a href="#">View Details</a>
    </a>
  </li>
</ul>

Answer №2

If you're looking to target the last child element in a list, you can utilize the :last-child selector.

Here's an example:

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>

To customize the appearance of the link, you can incorporate :link. Here's how you can do it:

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>

By the way, it's always beneficial to validate your markup. I recommend using the following validation services:

Validating your code is crucial for adhering to W3C standards and ensuring cross-browser compatibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why do certain images fail to load in ejs on the browser while others do?

Within the views directory, there is a public directory that contains the css, js, and image directories. While the css and js files in the public directory are functioning properly, only one image (specifically the logo in the navbar section) loads on the ...

cssnode.jsexpressbootstrap-4ejs

Tips for removing border highlight from an <select> element after being clicked

Is there a way to remove the border highlight (outline) of the <select> element after it is focused? I have successfully removed it for other elements like <input>, <textarea>, and <button>, but I'm struggling with the <sele ...

htmlcssbootstrap-4

Is it achievable to align this in the center?

UPDATE: I managed to resolve the issue using this method (Big thanks to everyone who offered suggestions) var intDuration = 50; setInterval( function(){ $('#image').animate({"margin-left": "-=0.05%", "margin-top": "-=0.05%", "width": "+=0.1%" ...

javascriptcss

The Maximum Width Property of CSS Tooltips is Not Being Applied

I'm working on a tooltip feature and facing an issue where the content does not expand as intended based on the CSS rules. Here's the snippet of my CSS code: .parent { display: inline-flex; position: relative; font-weight: 900; } .parent:h ...

htmlcss

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

Content escapes its parent container and seamlessly transitions to the following element

I am facing an issue with the layout of my element, which includes an image and text centered inside a parent container. Whenever I try adding more elements below the existing image and text, the green text with a red border overflows the current parent . ...

htmlcsstwitter-bootstrap

What is the method to display my input value within my application interface rather than triggering an alert popup?

Hi there, I am seeking assistance with my GUI code. I want the input value to be displayed as text on the screen, or even better, to look like a chatroom so that I can integrate a simple chatbot later on. My main goal is to have the texts show up in the bl ...

javascripthtmlcss

Why is this element occupying an excessive amount of space horizontally?

I've been diligently working on a unique custom WordPress theme as part of a school project. Our task is to redesign the homepage of an association, in my case, a theater group. One of the challenges I encountered was customizing the WordPress menu t ...

htmlcsswordpresswidth

Issue with icons not properly expanding and collapsing in accordion display

Currently, I am in the process of constructing an accordion that consists of multiple children and showcases an open/close icon upon clicking. The concern I am facing revolves around the behavior of the icons. Everything works smoothly when expanding and ...

jquerycssaccordion

Displaying all hidden sections on a website

I'm trying to figure out if there's a way to expand all the collapsible sections on a webpage at once. One section that is relevant to my search looks like this: <tr> <td></td> <td style="..;"> <div s ...

javascriptcsshtml

What is the best way to vertically align a div in the center?

Similar Question: What is the Optimal Method for Vertically Centering a Div with CSS? .title_text_only{ position:absolute; width:100%; display:none; z-index:9; top:50%; bottom:50%; text-align:center; color:#fff; font-size:18px; text-shadow: 1px 1p ...

javascriptjqueryhtmlcssvertical-alignment

Tips for setting background colors as a prop for Material UI cards in React JS

Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...

javascriptcssreactjsmaterial-uijss

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

jquerycss

What are some ways to utilize the pseudo elements ::before and ::after within the Material-UI framework?

Can someone please explain how to use the pseudo-element method in MUI? I couldn't find clear instructions in the documentation, so I decided to post a question here. The docs mention the following about pseudo elements: The box-sizing property is ...

cssmaterial-uipseudo-element

Moving in a single direction while the class is being removed

I'm attempting to design a sidebar similar to this: function show_menu(){ document.querySelector('#sidebar').classList.toggle('sidebar_open'); document.querySelector('#blackscreen').classList.toggle('blacks ...

javascripthtmlcss

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...

javascriptjqueryhtmlcssmousehover

Positioning a video element in the center using the margin property with a value of 0 and

I'm having trouble getting this video element centered on my webpage. Here's the code snippet I've been working with: HTML <div id="container">     <video id="vid" x-webkit-airplay="allow" controls width="640" height="360" src ...

htmlcsshtml5-video

The CSS styling feature is not functional within the JavaMail API

After receiving an email sent using the JavaMail API, I noticed that the CSS styles are not being applied and only the HTML content is rendered. HTML CODE <!doctype html> <html lang="en"> <head> <meta charset="u ...

javahtmlcssjakarta-mail

Show the div in the right position for both desktop and mobile screens, utilize an accordion or consider shifting the div

My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image. On a desktop screen, everything functions smoothly with four images of team members displayed in ...

htmlcssbootstrap-4accordion

The cursor:pointer attribute fails to respond, along with the width and height properties not being recognized

Here is my custom CSS code: .uploadify { position: relative; margin-bottom: 1em; width:264px; height:54px; cursor:pointer; } Despite specifying the size in the attached HTML file (only accessible by administrators), the div does not ...

css