Search code examples
htmlcsscss-selectorsattributesstyling

Add styling to 2nd child of div with known class

<a href="" class="header-logolink">

    <div>
        <img class="header-logoimage" src="~/images/SummerFling-logo.jpeg" alt="Summer Fling"/>
    </div>
    <div>
        <h1 class="header-logotext">Summer Fling</h1>
    </div>

</a>

How can I add separate styling to the 2 <div>'s here without adding classes to the <div>'s?

I have tried using:

.header-logolink:nth-child(1) {

}

But that affects the styling of <a> instead of the first <div> as seen here.

Solution

  • You are selecting the anchor tag with the nth element, you have to select div and then specify the nth element like the below

    .header-logolink div:nth-child(1) {
  background-color:red;
}

.header-logolink div:nth-child(2) {
  background-color:green;
}