How to remove CSS style?

Question

I have a block with div inside:

<div>
   <div class="do">Do it</div>
</div>

Element .do has cursor: none, but parent div has cursor.

How to remove cursor from .do element? Now parent block sets this property

Can you provide an example of it not working as intended?

Salmin Skenderovic
– Salmin Skenderovic

2020-03-30 14:55:22 +00:00
Commented Mar 30, 2020 at 14:55 — Salmin Skenderovic
– Salmin Skenderovic, Commented Mar 30, 2020 at 14:55
Tread carefully. Hiding the cursor is bad practice.

chriskirknielsen
– chriskirknielsen

2020-03-30 14:56:18 +00:00
Commented Mar 30, 2020 at 14:56 — chriskirknielsen
– chriskirknielsen, Commented Mar 30, 2020 at 14:56

Banzay · Accepted Answer · 2020-03-30 14:53:50Z

2

It should come with simple rule

div {
  cursor: pointer;
}
.do {
  cursor: none;
}

<div>
   <div class="do">Do it</div>
</div>

answered Mar 30, 2020 at 14:53

Banzay

9,4802 gold badges32 silver badges46 bronze badges

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

Comments

choz · Accepted Answer · 2020-03-30 14:58:45Z

2

You're probably dealing with CSS Precedence Rule. Have a look at this Specificity doc for further details.

I am assuming, this is what's happening (Pasted code from Nicolae's answer)

.withCursor > .withoutCursor {
  cursor: pointer;
}
.withCursor {
  cursor: pointer;
}
.withoutCursor {
  cursor: none;
}

<div class="withCursor">
   <div class="withoutCursor">Do it</div>
</div>

As you may notice, the rule for .withoutCursor gets overridden by the .withCursor > .withoutCursor.

If you figure out the right selector for your .do, or remove the one that overrides it, this should be trivial.

answered Mar 30, 2020 at 14:58

choz

18k5 gold badges58 silver badges76 bronze badges

Comments

Nicolae Maties · Accepted Answer · 2020-03-30 14:52:14Z

1

.withCursor {
  cursor: pointer;
}

.withoutCursor {
  cursor: none;
}

.withInitialCursor {
  cursor: initial;
}

<div class="withCursor">
   <div class="withoutCursor">None</div>
   <div class="withInitialCursor">Cursor initial</div>
   <div>Cursor pointer - inherited</div>
</div>

You can just do cursor: none to the inner element.

answered Mar 30, 2020 at 14:52

Nicolae Maties

2,6782 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to remove CSS style?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related