CSS to target a class with a specific attributes value

Question

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>

Content is not actually an attribute to the element. If it were, you would be able to select using it. Having said that, I do not see any reason why the selector .Node-bullet:before shouldn't work fine in this case. — Nisarg Shah
– Nisarg Shah, Commented Nov 11, 2017 at 16:09
.Node-bullet:before{ content: none !important; } can you please ry this. — msz
– msz, Commented Nov 11, 2017 at 16:13
@msz I have that already, but I'm trying to not target the same CSS class with a different content value — Vincent Tang
– Vincent Tang, Commented Nov 11, 2017 at 16:14

Nick · Accepted Answer · 2017-11-11 16:20:13Z

1

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] {
}

answered Nov 11, 2017 at 16:20

Nick

4172 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vincent Tang · Accepted Answer · 2017-11-11 16:43:24Z

0

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;
}

answered Nov 11, 2017 at 16:43

Vincent Tang

4,1966 gold badges52 silver badges72 bronze badges

Collectives™ on Stack Overflow

CSS to target a class with a specific attributes value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related