Selector - css3 :not() - Forums

Board index » YUI 2.x: » Using YUI 2.x Components

Selector - css3 :not()

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Matt Parker

YUI Contributor

Username: mattatlamplight
Joined: Mon Apr 20, 2009 12:03 pm
Posts: 466
Location: London UK
GitHub: mattparker
Gists: mattparker

Tags:

Selector - css3 :not()

Posted: Wed Jul 14, 2010 11:56 pm

+0-

Hi,

I'm having trouble with my css3 selectors. This is more a css question, rather than YUI, but anyway...

Given the html (it's a diary):

Code:

<div id="a1" class="event person1 person2">...</div>
<div id="a2" class="event person1">...</div>
<div id="a3" class="event person3">...</div>
<div id="a4" class="task">...</div>
<div id="a5" class="event person1 person3">...</div>

I want to select events involving person1, but not if they also involve person 2 or 3: ie. I want to
select #a2; but using class selectors. I can't find a way to do this with Selector.
Here's what I've tried and the results (in FF so far).

Code:

var S = YAHOO.util.Selector;

S.query("div.event.person1:not(.person2)");
// Gives #a2 & #a5... OK so far...

S.query("div.event.person1:not(.person2.person3)");
// Gives #a1 & #a2 & #a5

S.query("div.event.person1:not(.person2 .person3)");
// Gives #a1 & #a2 & #a5

S.query("div.event.person1:not(.person2):not(.person3)");
// Gives #a1 & #a2 & #a5

S.query("div.event.person1:not(.person2, .person3)");
// Gives every element in the document: :not() can only take simple selectors, I think, not multiple ones

S.query("div.event.person1:not(.person2), div.event.person1:not(.person3)");
// Gvies #a1, #a2 and #a5

I want to write :not(.person2 || .person3) , but I don't think you can!

Does anyone have any suggestions? Is the only way to do it

Code:

S.query("div.event.person1");

and then loop through checking for the other personX classes?

Thanks,

Matt

Don (少傑) Chiang

Username: donchiang
Joined: Sun May 20, 2012 11:33 pm
Posts: 1

Tags:

selector

Re: Selector - css3 :not()

Posted: Sun May 20, 2012 11:42 pm

+1-

yes you are right you can't use groups of selectors with negation:

http://www.w3.org/TR/css3-selectors/#negation

you should use simple selector instead:

http://www.w3.org/TR/css3-selectors/#si ... ectors-dfn

so :not(.person1, .person2) won't work. you have to write it like:

:not(.person1):not(.person2)

to filter out both person1 and person2

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum