using two css attribute selectors with *

Question

I have the following four different types of body tag situations:

<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-06 section-calendar admin-menu'>

<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices section-calendar admin-menu'>

<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-06-games section-calendar admin-menu'>

<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-all-games section-calendar admin-menu'>

I want to write a css selector which will select EITHER of the first two body tag cases and NOT the last two, and an another selector which will select the last two body tag cases alone. Can I do something like this body[class*=page-calendar-practices][class*=games] for the second case? How could I write the first case?

This selector will select the first and second examples, but not the other ones: .page-calendar-practices-2012-06, .page-calendar-practices. What are the matching conditions? — Rob W
– Rob W, Commented Jun 24, 2012 at 20:01
I changed 'situations' to 'body tag situations'. I am trying to write css code which can be used to give a specific style for the first two and a specific style for the last two. — user1015214
– user1015214, Commented Jun 24, 2012 at 20:05
@user1015214 Well, my suggestion works for these examples. Isn't there a general use case, such as practice-XXXX-YY or something like that? — Rob W
– Rob W, Commented Jun 24, 2012 at 20:09
"body tag situations" is not any clearer. It's pretty obvious we're working with the body tag. You need to explain what situations they are. Body tag with which classes in particular? — BoltClock
– BoltClock, Commented Jun 24, 2012 at 20:11

Rob W · Accepted Answer · 2012-06-24 20:19:45Z

5

According to your comment's description, you're looking for the following selector:

body:not([class*="-games"])

See the :not pseudo-class and attribute selectors.

edited Jun 24, 2012 at 20:19

answered Jun 24, 2012 at 19:58

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1015214 Over a year ago

Ok, I forgot about the :not selector. But is there a way to select in css something like body:not([class*="-games"]):is([class*="page-calendar-practices"])? I know that there is no :is selector, but I would like to be able to have a selector select ONLY those with -games in the class name AS WELL AS page-calendar-practices. This will make the selector more specific.

Matt Coughlin Over a year ago

You can specify multiple attribute conditions, [key1="value1"][key2="value2"] and work out the combination you need.

user1015214 Over a year ago

But will that work if both the attributes are 'class'? meaning, [class*=key][class*=key]?

Matt Coughlin Over a year ago

Yes, I tested it and it works fine. I modified the example in my answer. There's still the potential for false positives, but it should work fine in practice.

Matt Coughlin · Accepted Answer · 2012-06-24 20:58:00Z

There's only 1 CSS class that's unique to each of the four examples. Each of them has one of the 4 following classes:

page-calendar-practices-2012-06
page-calendar-practices
page-calendar-practices-2012-06-games
page-calendar-practices-all-games

Based on that, to select the first two:

.page-calendar-practices-2012-06,
.page-calendar-practices {...}

And to select the last two:

.page-calendar-practices-2012-06-games,
.page-calendar-practices-all-games {...}

Edit:

Applying this more generally (similar to @Rob W's answer).

/* First two, if -games doesn't appear anywhere */
body[class*="page-calendar-practices"]:not([class*="-games"]) {...}

/* Last two, if -games does appear somewhere */
body[class*="page-calendar-practices-"][class*="-games"] {...}

Unfortunately, using [class$="-games"] doesn't work. The class attribute is treated like any other attribute with this type of selector.

In this comment, he said that the class names are not necessarily equal to ...-2012-06.

Rich Bradshaw · Accepted Answer · 2012-06-24 20:21:20Z

you could always chain them instead of using selectors. note: i used all of your classes here, but these are very long statements and could/should be reduced, but you'll have to do that at your discretion.

.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices-2012-06.section-calendar.admin-menu,
.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices.section-calendar.admin-menu{}

.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices-2012-06-games.section-calendar.admin-menu,
.not-front logged-in.page-calendar.two-sidebars.page-calendar-practices-all-games.section-calendar.admin-menu{}

Collectives™ on Stack Overflow

using two css attribute selectors with *

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Related