CODEWITHSUNDEEP
csscss-selectors
CP Creative Studio
CP Creative Studio

Reputation: 155

Change anchors in a specific div

I'm trying to target some anchor tags that reside in one of 3 child divs. These divs are nested in a parent div. The 3 are set to float:left so they appear side by side. The 3rd div of this set is the one that contains some anchors that I'm trying to change their color and right-align them. Here's what I have:

The .logo-bckgrnd-rpt is the class for my parent div. This contains 3 child divs. I've manged to target the 3rd child div, but I can't get the color and alignment of the anchors to work. 

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

}

Upvotes: 0

Views: 195

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

To do the alignment you would want to target the parent div like so.

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

To change the color of the anchor tags you might want to target them like so.

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

Here is an example.

.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>

Upvotes: 1

Related Questions