Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Question

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text?

I tried using the following CSS selector:

.my-class *:not(input[type="text"]) {
    // Some CSS properties here
}

However, this doesn't seem to be working. Any suggestions on how to achieve this?

html css css-selectors

Answer 1

Answer №1

The :not() CSS negation pseudo-class selector is a powerful tool in CSS styling. This functional pseudo-class selector allows you to specify a simple selector as an argument and then select elements that are not represented by that argument.

For more information, check out these resources: here and here.

When using the :not negation pseudo-class selector, remember that you can only use simple selectors.

To achieve your desired styling, follow this pattern:

.my-class :not([type='text']) {
   //Add your CSS properties here
}

You don't need to include * as a selector because it already matches every element on the page. Additionally, eliminating the input selector can simplify your code.

Check out this jsFiddle example for reference.

CODE SNIPPET:

.my-class :not([type='text'])::after {
  content: "selected";
  border: 1px solid red;
}

<div class="my-class">
  <input type="text">
  <input type="checkbox">
  <input type="radio">
  <div class="element">Div</div>
  <section>Section</section>
  <h1>H1</h1>
</div>

The restriction to simple selectors in the :not pseudo-class is primarily for performance reasons.

Find out more about Fast vs Complete Selector Profiles and stay updated on potential changes in level four selectors regarding this restriction.

Answer 2

The :not() CSS negation pseudo-class selector is a powerful tool in CSS styling. This functional pseudo-class selector allows you to specify a simple selector as an argument and then select elements that are not represented by that argument.

For more information, check out these resources: here and here.

When using the :not negation pseudo-class selector, remember that you can only use simple selectors.

To achieve your desired styling, follow this pattern:

.my-class :not([type='text']) {
   //Add your CSS properties here
}

You don't need to include * as a selector because it already matches every element on the page. Additionally, eliminating the input selector can simplify your code.

Check out this jsFiddle example for reference.

CODE SNIPPET:

.my-class :not([type='text'])::after {
  content: "selected";
  border: 1px solid red;
}

<div class="my-class">
  <input type="text">
  <input type="checkbox">
  <input type="radio">
  <div class="element">Div</div>
  <section>Section</section>
  <h1>H1</h1>
</div>

The restriction to simple selectors in the :not pseudo-class is primarily for performance reasons.

Find out more about Fast vs Complete Selector Profiles and stay updated on potential changes in level four selectors regarding this restriction.

Answer 3

Answer №2

.unique-class input:not([type=text]), .unique-class *:not(input)

The concept of negation pseudo-class, denoted by :not(X), is a unique functional notation that takes a simple selector as an argument. This selector excludes the negation pseudo-class itself and represents an element that does not match the specified argument.

It's important to note that negations cannot be nested; using :not(:not(...)) is considered invalid. Additionally, pseudo-elements are not valid arguments for :not().

For further information on W3C's pseudo negation, visit W3C website.

Answer 4

.unique-class input:not([type=text]), .unique-class *:not(input)

The concept of negation pseudo-class, denoted by :not(X), is a unique functional notation that takes a simple selector as an argument. This selector excludes the negation pseudo-class itself and represents an element that does not match the specified argument.

It's important to note that negations cannot be nested; using :not(:not(...)) is considered invalid. Additionally, pseudo-elements are not valid arguments for :not().

For further information on W3C's pseudo negation, visit W3C website.

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Answer №1

Answer №2

Similar questions

Avoid changing the size of the button based on the number of words it contains

What could be causing my ng-grid footer to refuse to align with the bottom border?

Having difficulties in dynamically swapping audio sources using JavaScript?

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

The ng-View feature appears to be malfunctioning within AngularJS

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

prevent the page from scrolling to the top when clicking on an empty <a> tag

Avoid having a pre tag enclosed long line exceed its container's width

I'm looking for a skilled CSS spinner creator. Can anyone recommend one?

Implementing a jQuery method in a PHP page that is loaded through AJAX

NextJS compilation sometimes results in undefined errors when using Sass styles

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

Can the placement of divs impact search engine optimization (SEO)?

What is the best way to align an image in the middle of an image slider within a Bootstrap

What are the best scenarios for employing Server Side Includes?

How to enhance the design with a box-shadow for a :after pseudo element

Ways to modify the text of an HTML element when hovering over it

Linking various nodes together using the capabilities of the Web Audio API

Checking links with AngularJS and HTML 5