How do I remove inherited content using classes in CSS?

Question

I am working on a new website (used HTML) which has an accordion. In the accordion, there is an image gallery (both use CSS & JS. I am new to JS). The accordion uses Unicode characters (minus to be precise) to display whether it's going to open or close.

Problem: The dots at the bottom of the gallery inherit the minus character from another class.

I've tried to remove the minus by a separate class by setting specifically the content to none (content: none;) in the css-file.

.active:after .test {
  content: none;
}

I added the class to the corresponding part of HTML code where the problem occurs:

<div style="text-align:center" class="active:after test">

This code doesn't work. How do I properly create a class with selectors and add it to the HTML-element to remove the 'minus' from the dots?

Snippet of code:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("imgSlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

img {
  width: 100%;
}

* {
  box-sizing: border-box
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.imgSlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 8px;
  color: white;
  font-size: 18px;
}

.next {
  right: 0;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.active,
.dot:hover {
  background-color: #717171;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795';
}

.active:after {
  content: "\2796";
}

.active:after .test {
  content: none;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title> Gallerie </title>
  <link rel="stylesheet" href="./stylesheet.css">

</head>

<body>
  <div class="site-container">
    <div class="page-container">
      <button class="accordion">Pictures 1</button>
      <div class="panel">
        <div class="slideshow-container">
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=1">
          </div>
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=2">
          </div>
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=3">
            <div class="galerytext">placeholder</div>
          </div>
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <div style="text-align:center" class="active:after test">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
      </div>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

EDIT: Added snippet.

You have to provide a [mcve] directly in the question. Your question and the given answer should also help future readers, but external links can become invalid. — t.niese, Jul 09 '19 at 13:59
I have tried to provide a minimal reproducible example in the question — jmehrsam, Jul 09 '19 at 14:08
I added a snippet to the code so it's possible for everyone to run it & see my problem. If this still does not help to get this post off "[on hold]" please clarify what I need to add. I fail to understand why it's marked as off-topic, can somebody please enlighten me? I am a beginner to stackoverflow, so I'd really like to get feedback what I could do better next time when posting something. — jmehrsam, Jul 11 '19 at 09:28

score 0 · Accepted Answer · answered Jul 09 '19 at 14:37

You were very close but your CSS had a couple of issues. First, you have to escape the colon in your selector: .active\:after (see this question for more info) and you needed to remove the space between that and .test. With this fix, you are now selecting the dots parent node. From there is is just a matter of selecting the .active:after and setting its contents to none like this:

.active\:after.test .active:after {
  content: none; /* Unicode character for "plus" sign (+) */
}

A slightly simpler approach would be to do this in place of the above:

.dot.active:after{
  content: none;
}

Thank you very much for pointing out my mistakes I made. I fixed my code now and it's working thanks to your detailed explanation. — jmehrsam, Jul 11 '19 at 09:24

How do I remove inherited content using classes in CSS?

1 Answers1