Hiding all untagged contents of a tag-CodePudding

I have this code, and I need to keep visible One and Four, and hide all the rest, pipes included. Problem is, I can't hide the pipes!

...and I cannot change the Html code.

.links * {
  display: none;
}

.link-one,
.link-four {
  display: inline;
}

<span >
  <a href="#" >One</a> |
  <a href="#" >Two</a> |
  <a href="#" >Three</a> |
  <a href="#" >Four</a> |
  <a href="#" >Five</a> |
  <a href="#" >Six</a>
</span>

CodePudding user response：

If you donot want to change the template you may need to add some script like below.

JavaScript solution

document.querySelector('.links').innerHTML = document.querySelector('.links').innerHTML.replaceAll('|', '');

.links * {
  display: none;
}

.links a::after {
  content: '|';
}

.links a.link-four:after {
  content: '';
}

.link-one,
.link-four {
  display: inline;
}

<span >
  <a href="#" >One</a> |
  <a href="#" >Two</a> |
  <a href="#" >Three</a> |
  <a href="#" >Four</a> |
  <a href="#" >Five</a> |
  <a href="#" >Six</a>
</span>

Pure CSS solution

Donot use "|" in HTML instead insert it as pseudo element. This involves the template change.

.links * {
  display: none;
}

.links a::after {
  content: '|';
}

.links a.link-four:after {
  content: '';
}

.link-one,
.link-four {
  display: inline;
}

<span >
  <a href="#" >One</a> 
  <a href="#" >Two</a> 
  <a href="#" >Three</a> 
  <a href="#" >Four</a> 
  <a href="#" >Five</a> 
  <a href="#" >Six</a>
</span>

CodePudding user response：

.links * {
  display: none;
}
.links a::after{
  content:'|';
  color:black;
  margin-left:5px;
  text-decoration:none !important;
  display:inline-table;
}

.link-one,
.link-four {
  display: inline;
}

<span >
  <a href="#" >One</a>
  <a href="#" >Two</a>
  <a href="#" >Three</a>
  <a href="#" >Four</a>
  <a href="#" >Five</a>
  <a href="#" >Six</a>
</span>

CodePudding user response：

It's not suggested but since you can't change html that makes it difficult. a way around is to use pseudo element to hide it as you can't input pipe using pseudo element.

.links * {
  display: none;
}

.link-one,
.link-four {
  display: inline;
}

.link-one::after {
  content: "";
  background-color: #fff;
  width: 30px;
  height: 100%;
  position: fixed;
}

.link-four::after {
  content: "";
  background-color: #fff;
  width: 20px;
  height: 100%;
  position: fixed;
}

<span >
  <a href="#" >One</a> |
  <a href="#" >Two</a> |
  <a href="#" >Three</a> |
  <a href="#" >Four</a> |
  <a href="#" >Five</a> |
  <a href="#" >Six</a>
</span>

CodePudding user response：

Hide the original pipes visually by setting their font-size to 0.
Reset the otherwise inherited font size for the contained links.
Re-create the pipes you need using a pseudo-element ::after, place that outside of the clickable link area and give it pointer-events: none so clicking on it won't trigger the link.

.links {
  font-size: 0;
}

.links * {
  display: none;
  font-size: 16px;
}

.link-one,
.link-four {
  display: inline-block;
  margin-right: 16px;
  position: relative;
}

.link-one::after {
  position: absolute;
  color: black !important;
  text-decoration: none;
  content: "|";
  right: -10px;
  pointer-events: none;
}

<span >
  <a href="#" >One</a> |
  <a href="#" >Two</a> |
  <a href="#" >Three</a> |
  <a href="#" >Four</a> |
  <a href="#" >Five</a> |
  <a href="#" >Six</a>
</span>