Assuming the element with class='Popup' is a direct child of the body, using the below selector would fulfill the requirement:
body >:not(.Popup),
body >:not(.Popup) * {
cursor: default;
/* Add any other necessary styles */
}
.Action {
cursor: pointer;
}
body >:not(.Popup),
body >:not(.Popup) * {
cursor: default;
color: green; /* for better visualization of selected elements */
}
<div>Cursor should be 'default' here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div class="Popup">Cursor should remain unchanged here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
This approach would also work if the element with class='Popup' is not a direct child of the body, as long as the element has a single defined selector path. Below is an example in such a scenario:
.Action {
cursor: pointer;
}
body >:not(.container),
body > .container >:not(.Popup),
body > .container >:not(.Popup) * {
cursor: default;
color: green;
/* for better visualization of selected elements */
}
<div class="container">
<div>Cursor should be 'default' here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div class="Popup">Cursor should remain unchanged here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
<input type="text" />
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
</div>
<div>abcd</div>
The key difference in this selector method, which may have been the reason for previous unsuccessful attempts, is the use of the children selector (>) rather than normal descendant or everything selectors (*).
If the selector were written as body :not(.Popup) or body *:not(.Popup), it would select all elements without the class='Popup', including the input, a, and span elements. This can be demonstrated in the following code snippet to visualize the selection:
.Action {
cursor: pointer;
}
body :not(.Popup) {
cursor: default;
color: green; /* for better visualization of selected elements */
}
<div>Cursor should be 'default' here.
<input type="text" value="dummy"/>
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div class="Popup">Cursor should remain unchanged here.
<input type="text" value="dummy"/>
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
<input type="text" value="dummy"/>
<a href="#">Link</a>
<span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here. <!-- Selected -->
<input type="text" value="dummy"/> <!-- Selected -->
<a href="#">Link</a> <!-- Selected -->
<span class="Action">Action</span> <!-- Selected -->
</div>
<div class="Popup">Cursor should remain unchanged here. <!-- Not Selected -->
<input type="text" value="dummy"/> <!-- Selected -->
<a href="#">Link</a> <!-- Selected -->
<span class="Action">Action</span> <!-- Selected -->
</div>
<div>Cursor should be 'default' here. <!-- Selected -->
<input type="text" value="dummy"/> <!-- Selected -->
<a href="#">Link</a> <!-- Selected -->
<span class="Action">Action</span> <!-- Selected -->
</div>
Note: The selectors :not(.Popup) and *:not(.Popup) do not seem to work effectively (in Chrome v24). It appears that selectors like element:not(x), element :not(x), or element > :not(x) are required.
By using the children selector, only elements (and their descendants) without class='Popup' that are children (not descendants) of the body tag are specifically targeted. This ensures that elements whose parent is not body are not selected.
<div>Cursor should be 'default' here. <!-- Selected by 1st selector-->
<input type="text" value="dummy"/> <!-- Selected by descendant selector-->
<a href="#">Link</a> <!-- Selected by descendant selector-->
<span class="Action">Action</span> <!-- Selected by descendant selector-->
</div>
<div class="Popup">Cursor should remain unchanged here. <!-- Not Selected -->
<input type="text" value="dummy"/> <!-- Not Selected -->
<a href="#">Link</a> <!-- Not Selected -->
<span class="Action">Action</span> <!-- Not Selected -->
</div>
<div>Cursor should be 'default' here. <!-- Selected by 1st selector -->
<input type="text" value="dummy"/> <!-- Selected by descendant selector-->
<a href="#">Link</a> <!-- Selected by descendant selector-->
<span class="Action">Action</span> <!-- Selected by descendant selector-->
</div>