Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully targeted the third child div, my attempts to style the anchors within it seem to be unsuccessful. Here is the code I am using:

The .logo-bckgrnd-rpt class pertains to the parent div containing the three child divs. While I have been able to target the third child div, altering the color and alignment of the anchor tags within it has proven challenging.

.logo-bckgrnd-rpt div:nth-child(3) a:link,
.logo-bckgrnd-rpt div:nth-child(3) a:visited  {
    color:#ec1d23;
    text-align:right;

}

Answer №1

To align the content, you can target the parent div in this way.

.logo-bckgrnd-rpt div:nth-child(3) {
    text-align:right;
}

If you need to change the color of the anchor tags, you can specify them like this.

.logo-bckgrnd-rpt div:nth-child(3) a, .logo-bckgrnd-rpt div:nth-child(3) a:visited {
    color:#ec1d23;
}

Check out this demo below for reference.

.logo-bckgrnd-rpt div {
  float: left;
  width: 150px;
  height: 50px;
  background-color: #aaa;
  margin-right: 10px;
  padding: 10px;
}

.logo-bckgrnd-rpt div:nth-child(3) {
  text-align:right;
}

.logo-bckgrnd-rpt div:nth-child(3) a, .logo-bckgrnd-rpt div:nth-child(3) a:visited {
  color:#ec1d23;
  display: block;
}
<div class="logo-bckgrnd-rpt">
    <div></div>
    <div></div>
    <div>
        <a href="#">foo</a>
        <a href="#">bar</a>
    </div>
</div>

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

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

Unable to place a div below another div

I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

Sorting `divs` based on the number of user clicks in JavaScript: A simple guide

I've implemented a script that tracks the number of clicks on each link and arranges them based on this count... Currently, everything is functioning correctly except when the <a> tags are nested inside a div. In such cases, the script ignores ...

The `tailwind.min.css` file takes precedence over `tailwind.css` in my Nuxt

Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes? https://i.stack.imgur.com/ExDCL.png Check out my files below. // tailwind.config.js const defaultTheme = require('ta ...

Vertical centering menu adjustment

Can anyone help me with centering an image on my website? I've tried the following code: top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); You can see what's happening on my site here: ...

Create a customized HTML popup featuring various packages

I am struggling to create an HTML popup within a React component due to some errors Here is the code snippet: <div> <button class="toggle">Button</button> <div id="link-box"> <ul> ...

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

choose the initial element within a class

Seeking a way to target the first element within each group of the same class? Consider the following scenario: <div class="group"> <div class="element"></div> <div class="element"></div> <div class="element"&g ...

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

The dropdown div does not activate when the image is clicked

When the image in the simple dropdown is clicked, it fails to activate the dropdown feature. This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario i ...

Utilizing Selenium and Python to Choose an Option from a Dropdown Menu

How can I extract the visible text 'planned works' from this HTML drop-down list? <select id="NewEnquiry.Purpose" data-bind="options: SelectablePurposes, value: Purpose, optionsText: 'Name', optionsCaption: '-- Pl ...

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

What is the best way to vertically center a caption when an image is being hovered over

I'm facing an issue with aligning my caption vertically inside a div when hovering. The image within the div is larger than the div, and I want the caption to be at the center of the div. HTML <div class="container-fluid"> <div id="pag ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

Is there an issue with hover not working for MUI styled component when focused?

Having trouble getting both focus and hover effects to work on the same MUI styled component in React. Check out this code sandbox for a demonstration. When clicking on the Select element, the background and border colors do not change: const SelectStyle ...

Modifying the Inactive Tab Color in Material UI

For my application, I have a specific requirement where the active tab needs to be styled in red and the inactive tab in blue. Here is how the styling is set up: newStyle: { backgroundColor: 'red', '&$selected': { b ...

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...