1

I have the following CSS:

#content-button-panel ul li a.folder span {
  cursor: default;
}
#content-button-panel ul li a:not(.folder) span {
  cursor: pointer;
}

and the following HTML:

<a class="title-coffee"><span>Overview</span></a>

How can I make it so the HTML (with class of title-xxxxxxx) has a cursor of default? Note I need this to work with title-coffee or any class starting with title-

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356

4 Answers4

2

Why would you not just add new CSS classes like this:

.cursor {
    cursor: default;
}
.pointer {
    cursor: pointer;
}

And then you use each class specifically where needed like:

<a class="coffee cursor"><span>Overview</span></a>
<a class="folder pointer"><span>Pointer</span></a>
Mike Brant
  • 70,514
  • 10
  • 99
  • 103
1

You can use one of the many attribute selectors. This one selects all a elements whose class attribute begins with "title-"

 a[class^="title-"]

In your case you'd use it like this:

#content-button-panel ul li a.folder span,
#content-button-panel ul li a[class^="title-"] span {
  cursor: pointer;
}
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • I like this but can I combine this with not(.folder) In my case it's the other way around from yours. I want the class that starts with title- to be default. –  Dec 24 '12 at 16:34
  • Thanks but in my question what I need is for everything to be default except title- and the links with a class of folder. Sorry if the question is confusing. –  Dec 24 '12 at 16:38
  • No problem. Ok - does this do it? The `cursor: pointer` rule is applied to only those two. Others are left with `cursor: default`. – João Paulo Macedo Dec 24 '12 at 16:45
0

Here is what I would do. I would rather use ID's on each object and target them specifically as needed. In cases you are targeting a class, it makes it harder to specify specific items which is why I recommend this method.

CSS:

.defaultCursor {
   cursor: default;
}

HTML:

<a id="ThisItemsID" ><span>Overview</span></a>

JS Code (wherever you need to apply the cursor, as needed):

$("#ThisItemsID").addClass('defaultCursor');
Anil
  • 2,539
  • 6
  • 33
  • 42
  • This won't work, cause specificity of your selector is much lower than those in the question. – Pavlo Dec 24 '12 at 16:40
0

Negation with CSS can be done 2 ways 1 way:

input:not(.classA, .classB) /* personally, I've never seen this work */

or

input:not([type="radio"]):not([type="checkbox"])

Typically, I would recommend simply using a 3rd class instead of using :not. But in the case of input elements where some elements look better with the browser's default styling, writing out an inclusive selector to catch every single type I do want to style is considerably longer than writing out a negation selector for the types I don't want, I'll go for the shorter selector.

:not can be chained like any other simple selector or pseudo-class

a[class^="title-"]:not(.folder)
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • It *cannot* be done the first way in Selectors level 3; only the second (by chaining multiple negations). You may have either seen its use in jQuery (which implements `:not()` very differently; see [here](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css)), or seen it in [this article](http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector). However, the article is outdated and wrong; it only worked in Firefox 3 due to a bug. – BoltClock Dec 25 '12 at 08:13