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-
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>
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;
}
cursor: pointer rule is applied to only those two. Others are left with cursor: default.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)
:not() very differently; see here), or seen it in this article. However, the article is outdated and wrong; it only worked in Firefox 3 due to a bug.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');
a.folder spananda.title-xxxxxxx spanto have a default cursor, and everything else to be pointer?