how to exclude an element using CSS3?

Question

Here is the code:

input:not(#radioo input){
    display: block; 
    font-size:23px;
    border-radius: 10px; 
    width:310px;
    height: 40px
}

but all input are excluded! and I want only to exclude input that is in the form that has the ID radioo

Musa · Answer 1 · 2013-02-18T19:38:41.963

3

:not only takes simple selectors the best solution would be to give each input you want to exclude a class and use :not(.theclass)

From the comments it seems there is a solution without adding a class

form:not(#radioo) input{
    display: block; 
    font-size:23px;
    border-radius: 10px; 
    width:310px;
    height: 40px
}

edited Feb 18 '13 at 19:38

answered Feb 18 '13 at 19:31

Musa

1

@Gumbo: That would easily match the parent of `input` assuming the parent isn't `form#radioo` since you're not supposed to have an `input` directly inside a `form` in valid HTML. Using `:not()` with descendant selectors is generally not reliable. – BoltClock Feb 18 '13 at 19:39
@Musa it dident work i dont know why! i use Chrome Version 24.0.1312.57 m – Abdelouahab Pp Feb 18 '13 at 19:45
Update: it worked, i ommited the space before input, dident know that i must let a space :p – Abdelouahab Pp Feb 18 '13 at 19:47
1

@BoltClock You’re right. `*:not(#radioo)` it would match *any* parent element that doesn’t have the ID “radio”. But since an `input` can only have one parent `form`, the `form` instead of `*` is necessary. – Gumbo Feb 18 '13 at 19:50

score 2 · Accepted Answer · answered Feb 18 '13 at 19:35

2

The following selector seems to do what you want. Only the input in the second form will have an orange background.

form:not(#radioo) input {
    background: orange;
}

<form id="radioo">
    <input type="text" />
</form>

<form>
    <input type="text" />
</form>

answered Feb 18 '13 at 19:35

cimmanon

it is bizarre, but it dont work, Chrome Version 24.0.1312.57 m – Abdelouahab Pp Feb 18 '13 at 19:44
1

Odd. I have Chrome Version 24.0.1312.57 m and the fiddle works for me. Also works in Opera (12.14) and Firefox (18.0.2). – cimmanon Feb 18 '13 at 19:47
1

Not much I can do about that, I guess. Musa's original answer didn't have the correct selector until after my answer was posted (which was a few seconds after Gumbo's comment). – cimmanon Feb 18 '13 at 19:53

2 Answers2