CODEWITHSUNDEEP
css
Manaus
Manaus

Reputation: 451

Hiding all untagged contents of a tag

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 class="links">
  <a href="#" class="link-one">One</a> |
  <a href="#" class="link-two">Two</a> |
  <a href="#" class="link-three">Three</a> |
  <a href="#" class="link-four">Four</a> |
  <a href="#" class="link-five">Five</a> |
  <a href="#" class="link-six">Six</a>
</span>

Upvotes: 0

Views: 43

Answers (4)

connexo
connexo

Reputation: 56770

  1. Hide the original pipes visually by setting their font-size to 0.
  2. Reset the otherwise inherited font size for the contained links.
  3. 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 class="links">
  <a href="#" class="link-one">One</a> |
  <a href="#" class="link-two">Two</a> |
  <a href="#" class="link-three">Three</a> |
  <a href="#" class="link-four">Four</a> |
  <a href="#" class="link-five">Five</a> |
  <a href="#" class="link-six">Six</a>
</span>

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

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 class="links">
  <a href="#" class="link-one">One</a> |
  <a href="#" class="link-two">Two</a> |
  <a href="#" class="link-three">Three</a> |
  <a href="#" class="link-four">Four</a> |
  <a href="#" class="link-five">Five</a> |
  <a href="#" class="link-six">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 class="links">
  <a href="#" class="link-one">One</a> 
  <a href="#" class="link-two">Two</a> 
  <a href="#" class="link-three">Three</a> 
  <a href="#" class="link-four">Four</a> 
  <a href="#" class="link-five">Five</a> 
  <a href="#" class="link-six">Six</a>
</span>

Upvotes: 2

Saikat Roy
Saikat Roy

Reputation: 523

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 class="links">
  <a href="#" class="link-one">One</a> |
  <a href="#" class="link-two">Two</a> |
  <a href="#" class="link-three">Three</a> |
  <a href="#" class="link-four">Four</a> |
  <a href="#" class="link-five">Five</a> |
  <a href="#" class="link-six">Six</a>
</span>

Upvotes: 0

Arezou Saremian
Arezou Saremian

Reputation: 508

.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 class="links">
  <a href="#" class="link-one">One</a>
  <a href="#" class="link-two">Two</a>
  <a href="#" class="link-three">Three</a>
  <a href="#" class="link-four">Four</a>
  <a href="#" class="link-five">Five</a>
  <a href="#" class="link-six">Six</a>
</span>

Upvotes: 0

Related Questions