Welcome to WebmasterWorld Guest from 54.242.9.97

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with :not( ) + attribute selector

     
10:34 am on Dec 24, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2004
posts: 113
votes: 0


So here's a super pared-down snippet of my code:

[jsfiddle.net...]

I have default styles for input that are in my header, and inputs that are not in my header. All is well, except IE applies styling to check boxes that all other browsers don't. So I want to exclude checkboxes from my default input style. But when I do this, the default input style then overrides the default header input style. And to make things more confusing, this is the selector:

input:not([type=checkbox])

However if I write that selector "wrong" like so: input:not(type=checkbox)
that works. It skips checkboxes, and it doesn't override header input boxes. But it's incorrect syntax. What is going on here? Any ideas?
1:13 pm on Dec 24, 2012 (gmt 0)

New User

10+ Year Member

joined:Jan 19, 2006
posts:13
votes: 0


In wich IE version have you problems? Remember, :not just works on IE9 or later.
8:40 pm on Dec 24, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2004
posts: 113
votes: 0


Well the initial checkbox thing happens in IE9 and IE10. But the weird not behavior happens in all browsers.
10:22 pm on Dec 24, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13218
votes: 348


input:not([type=checkbox])

However if I write that selector "wrong" like so: input:not(type=checkbox)

Where did you get that the brackets are mandatory with :not? The CSS3 "Selectors" page doesn't say so, either explicitly or through their examples. If you did use brackets, I'd expect the form to be

input:not([CHECKBOX])

:: off to investigate ::
10:36 pm on Dec 24, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2004
posts: 113
votes: 0


All the examples show it in the form I used, with brackets. Plus the CSS validator complains when I don't have brackets.
4:47 pm on Dec 27, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


Hi,

input:not([type=checkbox]{} is working fine it must be some other conflict in your code. It's probably a specificity issue but we'd need to see some more relevant code.


However if I write that selector "wrong" like so: input:not(type=checkbox)
that works.


No it doesn't. The rule is simply ignored because it is invalid.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members