CODEWITHSUNDEEP
htmlcss
Muhammad Saqib
Muhammad Saqib

Reputation: 1117

Why is the last child not having the padding right with this code?

Please have a look at my code below, here is link to JSBin.

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider:first-child {
  padding-left: 20px;
}

.slider:last-child {
  padding-right: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

As you can see the first child in the slider has a left padding, why don't I get the same effect on the right most child given a CSS rule exists for it? Thanks

Upvotes: 0

Views: 61

Answers (4)

Amitabha Chakraborty
Amitabha Chakraborty

Reputation: 1

I am assuming you are expecting a margin as none of your yellow boxes have padding. Only all the yellow boxes starting from the 2nd box to the last box have margin-left: 10px; because you have mentioned 

.element+.element
{margin-left: 10px;
}

So if you want to have white margins to the left of the 1st box and to the right of the last box then you have to give it like this.

.element:first-of-type {
    margin-left:10px;
}
.element:last-of-type {
    margin-right:10px;
}

Upvotes: 0

Shital Marakana
Shital Marakana

Reputation: 2887

use .slider > div:last-child in css

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider:first-child {
  padding-left: 20px;
}

.slider > div:last-child {
  padding-right: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

Upvotes: 0

Super User
Super User

Reputation: 9642

Just add first-child & last-child rules to .element not in parent div. check updated snippet below..

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider .element:first-child {
  padding-left: 20px;
}

.slider .element:last-child {
  padding-right: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

Upvotes: 0

razemauze
razemauze

Reputation: 2676

Try using this:

.element:first-child {
  padding-left: 20px;
}

.element:last-child {
  padding-right: 20px;
}

Your code want the first .slider-element to have padding-left:20px; and the last .slider-element to have padding-right:20px;.

You need to add the child-selectors to the child-elements, not the parent.

Upvotes: 4

Related Questions