CODEWITHSUNDEEP
htmlcss
user1234
user1234

Reputation: 3159

how to NOT apply border-right to the last child of a div- CSS

Here is my html:

<div class="main">
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
</div>

now i want to apply border-right property to the child class. I did:

.parent.child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

I also tried:

.parent.child {
  border-right: 1px solid #e9e9e9;
}
.parent.child-child {
  border:none;
}

Both of them results in not showing the border to any of the divs. any idea how to work this?

Upvotes: 0

Views: 54

Answers (3)

Nicolas Trudel
Nicolas Trudel

Reputation: 70

Not sure if it was you are looking for but, since your .child element is next to a .child element in the dom you can simply use something like this:

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

This affects the .child that is next to a .child

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}
<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Upvotes: 1

anthony
anthony

Reputation: 23

Based on the code you supplied, any borders applied to <div class="child"> would not be visible because there is no content within the HTML elements.

With that being said, you also would need to update your CSS.

This is because currently, you are styling all elements with class="parent child" but none of your elements have both selectors in a single class. Because the classes (parent > child) are nested you will need a space between them in your CSS file (see below).

.parent .child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

For example,

<style>
    .parent .child:not(:last-child) {
        border-right: 1px solid #000;
        padding-right: 20px;
    }
</style>

<div class="main">
    <div class="parent">
        <div class="child">
            <span></span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
</div>

Notice how the first instance of the styled element is not rendered in the above example because there is no content.

<div class="parent">
    <div class="child">
        <span></span>
        <label></label>
    </div>
    <div class="child2">
        // some html content
    </div>
</div>

Upvotes: 1

shutupchigo
shutupchigo

Reputation: 713

Your code is almost there. Just made some minor changes.

Try this. 

.parent .child:not(:last-child) {
  border-right: 1px solid red;
  padding-right: 20px;
}

.child {
margin-bottom: 30px;
}
<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Upvotes: 1

Related Questions