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?
3 answers
solution1
4 2012-06-24 19:58:45
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 .
solution2
3 ACCPTED 2012-06-24 20:20:23
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.
solution3
0 2012-06-24 20:13:21
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{}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.