CODEWITHSUNDEEP
htmlcsscss-selectors
Aditya
Aditya

Reputation: 431

CSS: Add pipe on all div except last

I need to add pipe between links except after the last . My html is rendered in the following way , html is rendered with same class. 

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-of-type {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>


</body>
</html>

I need to add Pipe but after last link no pipe should be displayed . How can i do it for this case .

Fiddle Link

P.S. : This can be done easily when we have different links with different class . In my case links are dynamic and after last link no pipe should be displayed

Upvotes: 1

Views: 1453

Answers (4)

Asons
Asons

Reputation: 87191

Use this selector .sample:not(:last-of-type), which will target all but the last item.

Do note, when combining a class name with last-of-type, it will target any element type not being the last (if there is more than 1) having the given class.

Updated fiddle (added the pipe to the div so it won't pick up the color from the p)

.sample:not(:last-of-type) > div::after {
  content: ' | ';
}

Another option is last-child, .sample:not(:last-child), which also will target all but the last.

Do note, when using last-child, it means the last no matter class or element type, so if you have another element coming after the last sample, that will count as the last, and here is a fiddle sample showing how this rule will fail in cases like that.

Updated fiddle (added the pipe to the div so it won't pick up the color from the p)

.sample:not(:last-child) > div::after {
  content: ' | ';
}

A third option is to use the immediate sibling selecor +, which target all sibling elements with the given class but the first.

p:last-of-type {
    background: #ff0000;
    display: inline-block;
}

.sample + .sample > div::before {
  content: ' | ';
}
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
	<div >
		<p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
	<div >
		<p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
	<div >
		<p class="para">link1</p>
    </div>
</div>

Upvotes: 3

Johannes
Johannes

Reputation: 67748

One way to do it is to add this CSS rule:

.sample:not(:last-of-type) {
    border-right: 1px solid black;
}

https://jsfiddle.net/9c8szuc5/2/

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

I think you want like this.

.sample:last-child div {
   border: none;
}
.sample div {
  border-right: 1px solid #000;
  margin-right: 10px;
  padding-right: 10px;
}
<h1>This is a heading</h1>
<div>
<div class="sample" style="display:inline-block">
    <div>
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div>
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div>
        <p class="para">link1</p>
    </div>
</div>
</div>

Upvotes: 1

Danield
Danield

Reputation: 125443

Here's another way:

'Add a pipe before each link - only if it comes after another one'

.sample + .sample .para:before {
  content: "|";
  margin-right: 10px;
  color: red;
}


.sample + .sample .para:before {
  content: "|";
  margin-right: 10px;
  color: red;
}
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>
<div class="sample" style="display:inline-block">
    <div >
        <p class="para">link1</p>
    </div>
</div>

Upvotes: 2

Related Questions