CODEWITHSUNDEEP
csscss-selectors
user319940
user319940

Reputation: 3317

nth-child first and last both being applied to element

I'm trying to write a selector for the following markup:

<div class="row">
    <a href="#">
        <div class="one-third column">content</div>
    </a>
    <a href="#">
        <div class="one-third column">content</div>
    </a>
    <a href="#">
        <div class="one-third column">content</div>
    </a>
</div>

The selector should get the first .one-third.column and last .one-third.column and apply some custom CSS.

So far I've tried:

.row a > .one-third:first-child {
    padding-left: 0;
}

.row a > .one-third:last-child {
    padding-right: 0;
}

However, this results in both of the above selectors being applied to each one-third element. I'm trying to achieve this without adding classes to the first and last element. Any help is appreciated.

Upvotes: 2

Views: 5314

Answers (2)

ahmeticat
ahmeticat

Reputation: 1939

You can use nth-child(n) selector of css

https://www.w3schools.com/cssref/sel_nth-child.asp

.row a:nth-child(1) {
    padding-left: 0;
}

.row a:nth-child(3) {
    padding-left: 0;
}
<div class="row">
<a href="#">
    <div class="one-third column">content</div>
</a>
<a href="#">
    <div class="one-third column">content</div>
</a>
<a href="#">
    <div class="one-third column">content</div>
</a>
</div>

Upvotes: 0

M. Ferguson
M. Ferguson

Reputation: 1421

This can be done however you need to select the first and last child of the link. If you are going inside of the link and selecting the first and last child of an element that there is only one, your required styling will not be able to work. If you select the first and last a tag, you'll get the desired outcome:

.row a:first-child .one-third {
  padding-left: 0;
}

.row a:last-child .one-third {
  padding-right: 0;
}
<div class="row">
  <a href="#">
    <div class="one-third column">content</div>
  </a>
  <a href="#">
    <div class="one-third column">content</div>
  </a>
  <a href="#">
    <div class="one-third column">content</div>
  </a>
</div>

Here is a fiddle to show this with background colours: https://jsfiddle.net/oprkd3vp/

Hope this helps.

Upvotes: 4

Related Questions