CODEWITHSUNDEEP
htmlcsscss-selectorsless
sheez
sheez

Reputation: 63

nth-of-type does not work in less

I am styling a website and I need to apply some additional positioning due to the weird positioning (or different sizes?) of fontawesome icons.

This is the relevant html code: 

<div class="footer-social">
    <div class="social-button"><span class="fa fa-facebook fa-3x"></span></div>
    <div class="social-button"><span class="fa fa-twitter fa-3x"></span></div>
    <div class="social-button"><span class="fa fa-linkedin fa-3x"></span></div>
</div>

and here the relevant less code: 

.footer-social {
        float: right;
        margin-right: 73.5rem;
        margin-top: 8rem;
        .social-button {
            width: 4.3rem;
            height: 4.3rem;
            background-color: @accentColor;
            color: white;
            border-radius: 50%;
            margin-left: 10px;
            display: inline-block;
            span {
                line-height: 4.3rem;
                position: relative;
                left: 11px;
                &:nth-of-type(2) {
                    left: 8px;
                }
                &:nth-of-type(3) {
                    left: 9px;
                }
            }
        }
    }

The second and third spans are not adjusting to the additional position I gave them. What am I missing here?

Upvotes: 1

Views: 1346

Answers (1)

Harry
Harry

Reputation: 89790

There are no problems with your Less code and as-such it should compile pretty fine. The problem rather is because your HTML structure doesn't match with the selectors generated by Less.

Your current code looks for the 2nd element and 3rd element of type span within the .social-button element and then tries to style them. That will work only when all the three span tags are within the same .social-button tag like below.

<div class="footer-social">
    <div class="social-button"> 
        <span class="fa fa-facebook fa-3x">a</span>
        <span class="fa fa-facebook fa-3x">b</span>
        <span class="fa fa-facebook fa-3x">c</span>
    </div>
</div>

For your actual HTML structure, you would actually need to apply the styles to the span tag under the 2nd and 3rd elements with class as social-button. Hence your Less structure should be modified as below. (Note: I have just used some sample properties just for illustration).

.social-button {
    span {
        color: red;
    }
    &:nth-of-type(2) span {
        background-color: beige;
    }
    &:nth-of-type(3) span {
        background-color: pink;
    } 
}

This demo would give a small visual illustration on the difference between the two selectors and how they work depending on your HTML structure.

Upvotes: 4

Related Questions