All geek questions in one place

How to remove the border of the right shape of the last child div?

enter image description here

How to remove the border to the right of 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>
Run code

I am having trouble removing the right border shape of the last div I tried using: last-child: border: remove;

+4
source share
6 answers

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

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

, , , , - , .job-posting, , , DOM.

0

CSS :last-child . , .

.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>
+1

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>
0
.process:not(:last-child){
    border-right: 1px solid #e0e0e0;
}

, .

0

. .row, , .col-md-4. . last-* .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>
0

The CSS class name is a process, and the entire div you use has the same class name as in CSS ...

This means that all DIVs with the same class name will have the same property, in this case, the right border.

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

-1
source

Source: https://habr.com/ru/post/1689223/

More articles:


All Articles