How to remove border right form last child div?

user_7531883 0
Viewed 659

enter image description here

How do i remove border right form the last div?

.process {
  border-right: 1px solid #e0e0e0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

I'm having trouble removing the right border form the last div I tried using the :last-child:border:remove;

border css html
6 Answers

Get the last child using CSS :last-child pseudo-class selector. Apply the selector to the parent and get nested child since the parents are siblings.

.process {
  border-right: 1px solid #e0e0e0;
}

.col-md-4:last-child .process {
  border-right: none;
}
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

user_30372570

Start by selecting the containing parent element for specificity (.job-posting), then apply the pseudo-selector :last-child to the containing element of the .process class you intend to target:

.job-posting .col-md-4:last-child .process {
    border-right: 0px;
}

Since you are using framework classes that are most likely going to be used elsewhere you should use some sort of unique selector, like .job-posting, to avoid any conflicting styles you may experience on other pages or elements utilizing the same classes or similar nesting or DOM structures.

user_52834760

Just add this css:

.job-posting .col-md-4:last-child .process {
  border-right: 0;
}


.process {
  border-right: 1px solid #e0e0e0;
}
.job-posting .col-md-4:last-child .process {
  border-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

user_80243540 
.process:not(:last-child){
    border-right: 1px solid #e0e0e0;
}

Apply style to all elements except last child.

user_54856480

You should think over the condition of multi line adaptation.Use class .row to show a row , and not just limit to class .col-md-4. Note: Not use last-* on class .process .

.process {
    border-right: 1px solid #e0e0e0;
  }
  .row div:last-child .process{
    border-right: none;
  }

<html>
<head>
  <title>Test</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
  .process {
    border-right: 1px solid #e0e0e0;
  }
  .row div:last-child .process{
    border-right: none;
  }
  </style>
</head>
<body>
  <div class="job-posting">
    <div class="row">
      <div class="col-md-4">
        <div class="process">
          <header>STEP 1</header>
          <div class="process-content">
            <i class="fa fa-user-plus icon" aria-hidden="true"></i>
            <h1>Signup</h1>
            <p>Sign Up as a Company or an Individual</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="process">
          <header>STEP 2</header>
          <div class="process-content">
            <i class="fa fa-upload icon" aria-hidden="true"></i>
            <h1>Upload Resume</h1>
            <p>Upload your resume and provide us with details of you experience and skills</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="process">
          <header>STEP 3</header>
          <div class="process-content">
            <i class="fa fa-smile-o icon" aria-hidden="true"></i>
            <h1>Get Hired</h1>
            <p>Browse the available job postings and get hired according to your skills</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="process">
          <header>STEP 1</header>
          <div class="process-content">
            <i class="fa fa-user-plus icon" aria-hidden="true"></i>
            <h1>Signup</h1>
            <p>Sign Up as a Company or an Individual</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process">
          <header>STEP 2</header>
          <div class="process-content">
            <i class="fa fa-upload icon" aria-hidden="true"></i>
            <h1>Upload Resume</h1>
            <p>Upload your resume and provide us with details of you experience and skills</p>
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="process">
          <header>STEP 3</header>
          <div class="process-content">
            <i class="fa fa-smile-o icon" aria-hidden="true"></i>
            <h1>Get Hired</h1>
            <p>Browse the available job postings and get hired according to your skills</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

user_82879360

The CSS class name is process and all the div's that you have used has the same class name as in CSS...

Which means all the DIV with same class name will have the same property, in this case, a right border line..

So one thing you can do is change the class name...

user_34514650
Related