Disabled div content using css

Question

<div class="children"> Sachin </div>
<div class="children"> Moron</div>
<div class="children"> Peter </div>

is it possible to apply color to div with specfic content like below

If div content is sachin then i need to disabled it, other wise it will enable

.children sachin {
    cursor: not-allowed;
  opacity: 0.5;
  
  }

Not without using JavaScript in some way, CSS can't select elements based on the contents. — David Thomas, Mar 03 '23 at 12:04

score 1 · Answer 1 · answered Mar 03 '23 at 12:11

You can do it if you are able to use data attributes.

.children[data-name="Sachin"] {
  opacity: 0.5;
  cursor: not-allowed;
}

<div class="children" data-name="Sachin">Sachin</div>
<div class="children" data-name="Moron">Moron</div>
<div class="children" data-name="Peter">Peter</div>

score 1 · Answer 2 · answered Mar 03 '23 at 12:33

You can add a disabled class to the divs you want to disable.

<div class="children disabled"> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>

.children.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Using the disabled html attibute is also possible:

<div class="children" disabled> Sachin </div>
<div class="children"> Moron </div>
<div class="children"> Peter </div>

Disabled div content using css

2 Answers2