CODEWITHSUNDEEP
htmlcss
Vincent Tang
Vincent Tang

Reputation: 4170

CSS to target a class with a specific attributes value

On inspecting a webpage, I found an HTML element of interest, and looked at its css style properties below.

.Node-bullet:before {
    font-family: "IcoMoon", sans-serif;
    font-size: 16px;
    content: "\e90d";
}

I am trying to use stylish (chrome plugin) to overwrite that CSS.

.Node-bullet:before[content="\e90d"]{
    content: none !important;   
}

Its not working unfortunately. Is there a way to specifically search for a CSS class with an existing attribute[content], filter its value [\e90d], and overwrite it?

I know this is not efficient for production-level sites, I'm simply modifying my notetaking app client-side. I've tried looking at other selectors like descendent but I can't seem to find an easy pattern

EDIT

Overall HTML structure looks like this:

<div class="Node-self">
  <div class="Node-bullet">
  ::before <!-- SELECT THIS -->
  ::after
  </div>
</div>

<div class="Node-self is-collapsed">
  <div class="Node-bullet">
  ::before <!--DO NOT SELECT THIS -->
  ::after
  </div>
</div>

Upvotes: 0

Views: 324

Answers (2)

Vincent Tang
Vincent Tang

Reputation: 4170

Not the specific answer to this problem, but the answer to the overall issue I had using a NOT with a descendent selector

.Node-self:not(.is-collapsed)>.Node-bullet:before{
    content: none !important;
}

Upvotes: 0

Nick
Nick

Reputation: 417

content is a property, before a selector: you can not mix them.

For example you can find all anchor with attribute target _blank, but not with specific "content" or "background".

a[target=_blank] {
}

Upvotes: 1

Related Questions