Geek asks and answers

Using two css attribute selectors with *

I have the following four 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 that will select EITHER from the first two body tag tags, NOT the last two, and another selector that will select only the last two body tag tags. Can I do something like body [class = page-calendar-practice] [class * = games] for the second case? How could I write the first case?

0
source share
3 answers

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

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

Based on this, 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 in general (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"] {...}

, [class$="-games"] . class .

+3

:

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

:not .

+4

you can always link them, rather than use a selector. Note: I have used all your classes here, but these are very long statements and may / should be reduced, but you will have to do this 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{}
0
source

More articles:


All Articles