Menu
I am attempting to set a style for all the input elements that does not contain a class that begins with "border-radius":
input:not(class^="border-radius") {
This is not working. Any other ideas?
910
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.
The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.
:not() The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. /* Selects any element that is NOT a paragraph */ :not(p) { color: blue; }
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
Check Your Syntax
Ensure that your class attribute selector is contained within square braces to avoid any syntax issues.:
input:not([class^="border-radius"]) {
/* Your style here */
}
Handling Multiple Classes
Additionally, if you expect to contain multiple classes, you might want to consider using the contains selector *= instead as the previous approach will only work if the first class attribute starts with "border-radius" :
input:not([class*="border-radius"]) {
/* Your style here */
}
Examples
This is an example demonstrating the starts-with ^= selector.
input { margin: 10px}
input:not([class^="border-radius"]) {
background: yellow;
}<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />This is an example demonstrating the contains *= selector.
input { margin: 10px}
input:not([class*="border-radius"]) {
background: yellow;
}<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />Try input:not([class^="border-radius"]) instead. Attribute selectors are written inside square brackets [].
input:not([class^="border-radius"]) {
background: blue;
}<input type="text">
<input type="text" class='border-radius'>
<input type="text" class='border-radius-something'>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
