Selector not though unless

4 views
Skip to first unread message

Andrew Poulos

unread,
Dec 14, 2020, 11:06:22 PM12/14/20
to

How do I select all inputs in a form but not of type button, unless the
button has the class called, say, 'preview'?

I started writing
input:not([type="button"]), input.preview
and then wondered if it was appropriate. The first part of the selector
selects all non-button inputs while the second part should select
buttons with a 'preview' class. Will the first part discount the second?

Andrew Poulos

Evertjan.

unread,
Dec 15, 2020, 11:17:15 AM12/15/20
to
Andrew Poulos <ap_...@hotmail.com> wrote on 15 Dec 2020 in
comp.infosystems.www.authoring.stylesheets:
What do you mean by "appropriate", if your mother-in-law will concur?
Discounts only in your mother-in-law's delicatessen!

The proof surely is in the eating.

<style>
input {background:yellow;}
input:not([type="button"]), input.preview {background:navy;}
</style>

<input type='button'>
<input type='button'>
<input type='button'>
<input type='button' class='preview'>
<input class='preview'>



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Andrew Poulos

unread,
Dec 15, 2020, 3:36:11 PM12/15/20
to

On 16/12/2020 3:17 am, Evertjan. wrote:
> Andrew Poulos <ap_...@hotmail.com> wrote on 15 Dec 2020 in
> comp.infosystems.www.authoring.stylesheets:
>
>> How do I select all inputs in a form but not of type button, unless the
>> button has the class called, say, 'preview'?
>>
>> I started writing
>> input:not([type="button"]), input.preview
>> and then wondered if it was appropriate. The first part of the selector
>> selects all non-button inputs while the second part should select
>> buttons with a 'preview' class. Will the first part discount the second?
>
> What do you mean by "appropriate", if your mother-in-law will concur?
> Discounts only in your mother-in-law's delicatessen!

By "appropriate" I meant that it does what I am expecting/hoping it will
and have behave counter intuitively (have the expected action discounted).

> The proof surely is in the eating.
>
> <style>
> input {background:yellow;}
> input:not([type="button"]), input.preview {background:navy;}
> </style>
>
> <input type='button'>
> <input type='button'>
> <input type='button'>
> <input type='button' class='preview'>
> <input class='preview'>

Thanks, I ran your example and the selector works.

Andrew Poulos

Evertjan.

unread,
Dec 15, 2020, 5:59:58 PM12/15/20
to
Andrew Poulos <ap_...@hotmail.com> wrote on 15 Dec 2020 in
comp.infosystems.www.authoring.stylesheets:

>
> On 16/12/2020 3:17 am, Evertjan. wrote:
>> Andrew Poulos <ap_...@hotmail.com> wrote on 15 Dec 2020 in
>> comp.infosystems.www.authoring.stylesheets:
>>
>>> How do I select all inputs in a form but not of type button, unless the
>>> button has the class called, say, 'preview'?
>>>
>>> I started writing
>>> input:not([type="button"]), input.preview
>>> and then wondered if it was appropriate. The first part of the selector
>>> selects all non-button inputs while the second part should select
>>> buttons with a 'preview' class. Will the first part discount the second?
>>
>> What do you mean by "appropriate", if your mother-in-law will concur?
>> Discounts only in your mother-in-law's delicatessen!
>
> By "appropriate" I meant that it does what I am expecting/hoping it will
> and have behave counter intuitively (have the expected action discounted).

Appropriate means, imho, 'working' + 'socially correct',
I don't think intuition has much to do with it.

>> The proof surely is in the eating.
>>
>> <style>
>> input {background:yellow;}
>> input:not([type="button"]), input.preview {background:navy;}
>> </style>
>>
>> <input type='button'>
>> <input type='button'>
>> <input type='button'>
>> <input type='button' class='preview'>
>> <input class='preview'>
>
> Thanks, I ran your example and the selector works.

Okay, you got the taste.

Andrew Poulos

unread,
Dec 15, 2020, 7:13:20 PM12/15/20
to

On 16/12/2020 9:59 am, Evertjan. wrote:

>> By "appropriate" I meant that it does what I am expecting/hoping it will
>> and have behave counter intuitively (have the expected action discounted).
>
> Appropriate means, imho, 'working' + 'socially correct',
> I don't think intuition has much to do with it.

Appropriate also means "Suitable for a particular person, condition,
occasion, or place."

Andrew Poulos

Barry Margolin

unread,
Dec 16, 2020, 3:01:21 PM12/16/20
to
In article <27ednUz4JfKqq0XC...@westnet.com.au>,
No, the two selectors are treated independently. So the result is the
union of all elements that match either selector.

Basically

selector1, selector2 {
styles;
}

is equivalent to

selector1 {
styles;
}
selector2 {
styles;
}

--
Barry Margolin, bar...@alum.mit.edu
Arlington, MA
*** PLEASE post questions in newsgroups, not directly to me ***

Andrew Poulos

unread,
Dec 17, 2020, 4:02:21 PM12/17/20
to
On 17/12/2020 7:01 am, Barry Margolin wrote:
> In article <27ednUz4JfKqq0XC...@westnet.com.au>,
> Andrew Poulos <ap_...@hotmail.com> wrote:
>
>> How do I select all inputs in a form but not of type button, unless the
>> button has the class called, say, 'preview'?
>>
>> I started writing
>> input:not([type="button"]), input.preview
>> and then wondered if it was appropriate. The first part of the selector
>> selects all non-button inputs while the second part should select
>> buttons with a 'preview' class. Will the first part discount the second?
>
> No, the two selectors are treated independently. So the result is the
> union of all elements that match either selector.
>
> Basically
>
> selector1, selector2 {
> styles;
> }
>
> is equivalent to
>
> selector1 {
> styles;
> }
> selector2 {
> styles;
> }

Ah, so the comma acts like an "or".

Andrew Poulos

James Kirk

unread,
Dec 17, 2020, 8:58:29 PM12/17/20
to
In Message: <a--dnRoCzMzKWkbC...@westnet.com.au>
Andrew Poulos <ap_...@hotmail.com> wrote:

> On 17/12/2020 7:01 am, Barry Margolin wrote:

>> In article <27ednUz4JfKqq0XC...@westnet.com.au>,
>> Andrew Poulos <ap_...@hotmail.com> wrote:

[snip]

>>> input:not([type="button"]), input.preview

[snip]

>> No, the two selectors are treated independently. So the result is
>> the union of all elements that match either selector.

[snip]

> Ah, so the comma acts like an "or".


Groups of selectors
<https://www.w3.org/TR/2018/REC-selectors-3-20181106/#grouping>

Read the warning for invalid selectors.

--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜


Reply all
Reply to author
Forward
0 new messages