CODEWITHSUNDEEP
htmlcsscss-selectors
Naren Verma
Naren Verma

Reputation: 2307

Margin and padding not working in nth-last-child

I have to display last two number 6 and 7 on the right side and it is displaying but there is no space between two number I need equal space. I tried margin and padding but not working. would you help me in this?

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p a:nth-last-child(-n+2) {
  color: red;
  position: absolute;
  right: 30px;
  display: block;
}
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn"><img src="" />6</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
  </div>
</div>

Upvotes: 0

Views: 355

Answers (6)

Quentame
Quentame

Reputation: 355

Margin and padding is working well on nth-child.

Your problem is about positions ...

Solution 1:

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  float: left;
  margin: 10px;
}

.p p a {
  color: blue;
}

.p p:nth-last-child(-n+2) {
  float: right;
}

.p p:nth-last-child(-n+2) a {
  color: red;
}
<div class="width-60">
  <div class="p">
    <p><a href="">1</a></p>
    <p><a href="">2</a></p>
    <p><a href="">3</a></p>
    <p><a href="">4</a></p>
    <p><a href="">5</a></p>

    <p>
      <a href=""><img src="" />7</a>
    </p>
    <p>
      <a href=""><img src="" />6</a>
    </p>
  </div>
</div>

To understand why I reverse the two lastest elements : StackOverflow

Solution 2:

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.width-60 .left p,
.width-60 .right p {
  margin: 10px;
  float: left;
}

.width-60 .left {
  float: left;
}

.width-60 .left a {
  color: blue;
}

.width-60 .right {
  float: right;
}

.width-60 .right a {
  color: red;
}
<div class="width-60">
  <div class="left">
    <p><a href="">1</a></p>
    <p><a href="">2</a></p>
    <p><a href="">3</a></p>
    <p><a href="">4</a></p>
    <p><a href="">5</a></p>
  </div>
  <div class="right">
    <p>
      <a href=""><img src="" />6</a>
    </p>
    <p>
      <a href=""><img src="" />7</a>
    </p>
  </div>
</div>

Hope it helps.

Upvotes: 0

Piyali
Piyali

Reputation: 506

<style>
.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p:nth-last-child(1){
	position: absolute;
  right: 0;
}
.p p:nth-last-child(2){
	position: absolute;
  right: 30px;
}

.p p:nth-last-child(-n+2) a {
  color: red;  
  display: block;
}
</style>
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn"><img src="" />6</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
  </div>
</div>

Here is my code. don't have to exchange last two p class value.

<style>
.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p:nth-last-child(1){
    position: absolute;
  right: 0;
}
.p p:nth-last-child(2){
    position: absolute;
  right: 30px;
}

.p p:nth-last-child(-n+2) a {
  color: red;  
  display: block;
}
</style>

Upvotes: 0

Asons
Asons

Reputation: 87191

The overlap is cause by the position: absolute. One way to solve this is to use flexbox

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}
.p {
  display: flex;
}
.p p {
  color: blue;
  margin: 10px;
}
.p p a {
  color: red;
}
.p p:nth-last-child(2) {
  margin-left: auto;
}
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn"><img src="" />6</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
  </div>
</div>

Upvotes: 2

Ashish Bahl
Ashish Bahl

Reputation: 1493

You can use non breaking space too

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p a:nth-last-child(-n+2) {
  color: red;
  position: absolute;
  right: 30px;
  display: block;
}
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn">&nbsp;<img src="" />6 &nbsp;</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
  </div>
</div>

Upvotes: 0

sol
sol

Reputation: 22949

If you are open to using flex you can try this:

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
}

.p {
  display: flex;
}

.p p {
  color: blue;
  margin: 10px;
}

.p p:nth-last-child(2) {
  margin-left: auto;
}

.p p a:nth-last-child(n-2) {
  color: red;
}
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn"><img src="" />6</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
  </div>
</div>

Upvotes: 1

Leon Freire
Leon Freire

Reputation: 818

I would try inverting 6 and 7 and using float right in the p elements, if that works for you. Something like this:

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p:nth-last-child(-n+2) {
  color: red;
  float: right;
  display: block;
}
<div class="width-60">
  <div class="p">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="" class="btn"><img src="" />7</a>
    </p>
    <p>
      <a href="" class="btn"><img src="" />6</a>
    </p>
  </div>
</div>

Upvotes: 1

Related Questions