Using the `not()` CSS selector to target specific children elements

Question

Using the `not()` CSS selector to target specific children elements

Is there a way to add a specific attribute to all input[type=text] elements while excluding certain elements that do not have a class but their parent does?

Here is an example of the HTML structure:

<tr class="filters">
    <td>
        <input type="text" name="aName">
    </td>
    <td>
        <input type="text" name="anotherName">
    </td>
        ...
</tr>

I attempted to use the following CSS:

input[type=text]:not(tr.filters > td > input[type=text])
{
    min-width:400px;
}

However, this method did not produce the desired result. Is there an alternative way to achieve this without the use of the not() function?

css css-selectors

Answer 1

Answer №1

One cannot achieve this using the :not() as a CSS selector. The :not() pseudo-class can only accept a simple selector (which means only one type, .class, #id, [attribute] or :pseudo-class selector). Combinators like , > and + are not allowed.

The default value of min-width is zero, so an overriding rule can simply be used to set it to that:

input[type="text"] {
    min-width: 400px;
}

tr.filters > td > input[type="text"] {
    min-width: 0;
}

Answer 2

One cannot achieve this using the :not() as a CSS selector. The :not() pseudo-class can only accept a simple selector (which means only one type, .class, #id, [attribute] or :pseudo-class selector). Combinators like , > and + are not allowed.

The default value of min-width is zero, so an overriding rule can simply be used to set it to that:

input[type="text"] {
    min-width: 400px;
}

tr.filters > td > input[type="text"] {
    min-width: 0;
}

Answer 3

Answer №2

Have you considered implementing a solution similar to the following code snippet?

tr:not(.filters) td input[type=text]
{
    min-width:400px;
}

Answer 4

Have you considered implementing a solution similar to the following code snippet?

tr:not(.filters) td input[type=text]
{
    min-width:400px;
}

Using the `not()` CSS selector to target specific children elements

Answer №1

Answer №2

Similar questions

Two CSS files are loaded sequentially

What are some ways to eliminate the excess white space beneath the footer in HTML?

Are the site-wide navigation links working on one page but not the other?

Resetting CSS attributes in Kendo UI Mobile when transitioning between views after removing them with jQuery

Multiple CSS styles are being employed simultaneously to render the webpage

Dynamic Bootstrap Tab menu slider with movable functionality when the limit is reached

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

A handy feature of HTML5 is the dataset attribute, which

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

Expand the range of input movement using a unique and oversized custom thumb graphic

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

Difficulty with Bootstrap 4 mobile navbar dropdown feature

Tips for preventing the impact of angular mat-panel position changes on matdialog

Why is the col-1 in Bootstrap stacking up instead of flowing horizontally as intended?

How can I vertically align text in React-bootstrap Navbar Nav-items?

Stop the div from expanding because of oversize text in Bootstrap

Having trouble with your website's container not wrapping properly?

Scroll horizontally through the number field in Chrome

The lower text box on the page being covered by the virtual keyboard on IOS

Ways to accomplish this visual style when focusing