CSS Tip: Enhance your divs by adding a vertical pipe to each one

Question

CSS Tip: Enhance your divs by adding a vertical pipe to each one

I am looking to insert a pipe character between links, with the exception of after the last one. The HTML is being rendered in such a way that it has the same class applied.

<!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 want to display a Pipe character after each link, but not after the final one. How can I achieve this within this scenario?

Fiddle Link

P.S. : Although it's easy when dealing with different classes for each link, my case involves dynamic links without displaying a pipe after the very last one.

html css css-selectors

Answer 1

Answer №1

For achieving this effect, you can utilize the following selector: .sample:not(:last-of-type), which will specifically target all elements except for the last one.

It's important to keep in mind that when using a combination of a class name with last-of-type, it will apply to any element type that is not the last one with the specified class (in cases where there are multiple elements).

Check out the updated fiddle (included a pipe to the div to prevent it from inheriting color from the p)

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

An alternative approach is utilizing the last-child selector, like so: .sample:not(:last-child), which will also target all elements except for the final one.

With the use of last-child, the styling applies to the very last element regardless of its class or element type. Therefore, if there's another element after the last one with the sample class, it will be considered as the last one instead. You can see an example demonstrating this scenario in this fiddle sample.

View the updated fiddle (added a pipe to the div to avoid inheriting color from the p)

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

A third option involves utilizing the immediate sibling selector +, targeting all sibling elements with the provided class except for the first one.

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>

Answer 2

For achieving this effect, you can utilize the following selector: .sample:not(:last-of-type), which will specifically target all elements except for the last one.

It's important to keep in mind that when using a combination of a class name with last-of-type, it will apply to any element type that is not the last one with the specified class (in cases where there are multiple elements).

Check out the updated fiddle (included a pipe to the div to prevent it from inheriting color from the p)

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

An alternative approach is utilizing the last-child selector, like so: .sample:not(:last-child), which will also target all elements except for the final one.

With the use of last-child, the styling applies to the very last element regardless of its class or element type. Therefore, if there's another element after the last one with the sample class, it will be considered as the last one instead. You can see an example demonstrating this scenario in this fiddle sample.

View the updated fiddle (added a pipe to the div to avoid inheriting color from the p)

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

A third option involves utilizing the immediate sibling selector +, targeting all sibling elements with the provided class except for the first one.

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>

Answer 3

Answer №2

Here's an alternate approach:

'Insert a vertical line before each link if it follows another link'

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

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

<h1>This is a title</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>

Answer 4

Here's an alternate approach:

'Insert a vertical line before each link if it follows another link'

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

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

<h1>This is a title</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>

Answer 5

Answer №3

It appears that this is what you are looking for.

.example:last-child div {
   border: none;
}
.example div {
  border-right: 2px solid #333;
  margin-right: 15px;
  padding-right: 12px;
}

<h2>Here is a title</h2>
<div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
</div>

Answer 6

It appears that this is what you are looking for.

.example:last-child div {
   border: none;
}
.example div {
  border-right: 2px solid #333;
  margin-right: 15px;
  padding-right: 12px;
}

<h2>Here is a title</h2>
<div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
<div class="example" style="display:inline-block">
    <div>
        <p class="text">click here</p>
    </div>
</div>
</div>

Answer 7

Answer №4

If you're looking to achieve this effect, one method is to incorporate the following CSS snippet:

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

For a live demonstration, check out this JSFiddle link.

Answer 8

If you're looking to achieve this effect, one method is to incorporate the following CSS snippet:

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

For a live demonstration, check out this JSFiddle link.

CSS Tip: Enhance your divs by adding a vertical pipe to each one

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Struggles with embedding a table within a form while working with jQuery Mobile

Instructions for transferring an object from a list box with Selenium WebDriver

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Is the CSS and jQuery plugin combination blocking the AJAX call or event listener from functioning properly?

Error: The function onSelect is not defined and cannot be executed by clicking on the HTML element with the id of "onclick" at line

Tips for highlighting HTML syntax within JavaScript strings in Sublime Text

What is the best way to format MarkDown content within a nextJs environment?

Having trouble getting the align-items-end property in Bootstrap 4 to function

Implement a Selection Feature in Angular

Is there a way to position a heart-shaped animation element on the top right corner of a Bootstrap card image?

What is the best way to utilize justify-content or align-self to perfectly center this?

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Design a dynamic responsive navbar with dropdown functionality

Confirming file type input is correct

Streamlined Infinite Scrolling Data Visualization Using SVG Implemented in HTML and CSS

Enhance the slider's worth

Is there a way to narrow down the font choices using HTMLPurifier?

Switching background image when hovering over a link purely through CSS

Create an endless loop of two distinct animations with animate.css

Width of flex container overflowing from relative position is at its full capacity