CSS to hide Attribute Content

Question

Expected Result

I want to hide the content of data-count-green if the content is 0.

I have tried using the following

CSS

.myclass[data-count][content='0'] {
  display: none;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myclass[data-count] {
        position: relative;
      }

      .myclass[data-count][content='0'] {
        display: none;
      } 

      .myclass[data-count]:after {
        position: absolute;
        content: attr(data-count);
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <i class='myclass' id="comment" data-count='0' </i>
      </div>
    </div>
  </body>
</html>

Also your HTML is malformed in your example, which could be contributing to your issues: ` — Alexander Nied, Mar 25 '19 at 18:51

score 3 · Accepted Answer · answered Mar 25 '19 at 18:51

3

Just use .far[data-count-green='0']

.far[data-count-green='0'] {
    display: none;
}

<div>
    <div>
     <i class='far' id="comment" data-count-green='0'>I'm not visible</i>
    </div>
 </div>

answered Mar 25 '19 at 18:51

Matheus Cuba

2,068
1
20
31

1

I am so thankful to you. I have been trying this for so long. – user2837961 Mar 25 '19 at 18:57

CSS to hide Attribute Content

Expected Result

CSS

HTML

1 Answers1