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;

}
csscss-selectors

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

Enhance class names by utilizing addEventListener within the useEffect hook

I'm having trouble with creating a hamburger button menu. The issue I'm facing is that when I click the button, nothing happens. Even though I can log something in the toogleHamburger function and see it in the console, the styling does not chang ...

cssreactjssass

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

Overlap of Navigation Bar and Carousel

Encountering an issue. I recently made a modification to my website in hopes of integrating a full-width carousel instead of a jumbotron. However, there seems to be a problem as my navbar is overlapping the jumbotron section along with the caption and oth ...

csstwitter-bootstrap

Interactive Thumbnail Previews

There seems to be an issue with the thumbnail links on my page. The leftmost and rightmost links work fine, but the middle ones are not functioning properly when clicked. The PHP code used to generate these links is the same for all of them, so it's p ...

javascriptphphtmlcss

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

Issue with styled-components not being exported

Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...

javascripthtmlcssreactjsstyled-components

What is the best method to eliminate unnecessary space between controls in HTML?

Presently, I am facing the following scenario. http://jsfiddle.net/ef7vh/1/ </p> <pre> <div> <button>Button1</button> <span style="border: solid 1px black; padding: 0px 10px 0px 10px">My Text</span> < ...

htmlcss

The UI gets all wonky when using ThemeRoller for jQuery

Currently, I am encountering an issue where I want to utilize ThemeRoller for implementing custom themes on my views. However, when I apply these themes, the interface ends up looking distorted, as shown in the images below: Before using ThemeRoller: Aft ...

jquerycssasp.net-mvcjquery-mobilejquery-mobile-themeroller

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along the x-axis. var mouseX; $(document).mousemove( function moveFunc(e) { mouseX = e.clientX; var timV = $("#deko_vid").get(0).duration; var valV = (timV*mouseX/$(do ...

javascriptjqueryhtmlcsshtml5-video

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

javascripthtmlcssreactjsmaterial-ui

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

htmlcsswebfrontendresponsive

Updating the Background Image Based on Text Input in JavaScript

Struggling to utilize the text entered into a text input field as a background image URL. Ensuring it is valid is key. This snippet displays what has been attempted so far... CSS: body { margin: 0px; padding: 0px; border: 0px; } .bgimg { backgr ...

javascriptcssurlbuttoninput

Eliminate the navigation bar option from a website template

Is there a way to permanently eliminate the menu button in this theme? Any guidance would be appreciated. Here's the link to the theme: https://github.com/vvalchev/creative-theme-jekyll-new ...

javascripthtmlcssthemesjekyll

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

My angular app is running smoothly, but now I want to add animations between views. When a user clicks on a link in the navbar, I want the view to slide to a different one. I was inspired by this example: Sliding between views. However, when I implemented ...

htmlcssangularjsng-animateangularjs-view

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding body { border:2px #666 solid; padding:5px; } in the CSS code, which looked good in the HTML view, but not in the p ...

htmlcssprint-css

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

Loading texts with the same color code via ajax will reveal there are differences among them

I am currently designing a webshop with green as the primary color scheme. Everything is functioning perfectly, but I have noticed that the text within an ajax loaded div appears brighter than it should be. The text that loads traditionally is noticeably d ...

javascriptjqueryhtmlcss

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

What is the best way to remove the help button on the WordPress dashboard?

Being a beginner in Wordpress, I am trying to figure out how to hide the help button on the top right of the dashboard in the admin backend without resorting to plugins or code removal. My plan is to simply add display:none to a CSS file, but I am having ...

csswordpress