CODEWITHSUNDEEP
css
POV
POV

Reputation: 12005

How to remove CSS style?

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

Upvotes: 0

Views: 61

Answers (3)

choz
choz

Reputation: 17858

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.

Upvotes: 2

Banzay
Banzay

Reputation: 9470

It should come with simple rule

div {
  cursor: pointer;
}
.do {
  cursor: none;
}
<div>
   <div class="do">Do it</div>
</div>

Upvotes: 2

Nicolae Maties
Nicolae Maties

Reputation: 2655

.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.

Upvotes: 1

Related Questions