Hide/override CSS classes dynamically

Question

I have the following HTML.

<th id="form:dataTable:discountStartDate">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
</th>

I need to hide the given CSS class - ui-sortable-column-icon from the last <span> only.

If I do the following,

<style type="text/css">
    #form\:dataTable\:discountStartDate .ui-sortable-column-icon{
        display : none;
    }
</style>

then, it will hide that class from both the span tags.

The first span tag is written by me. Therefore, it can be manipulated. It can be given an id attribute, if necessary but the other span tag is generated by a framework that I cannot tough.

Is there a way to hide the CSS class as specified from the last span tag only?

_{It would be even better, if all the classes from that last span tag are overridden.}

You can't use CSS to remove class-names (though you can provide more specific selectors to override the CSS applied by existing class-names). What are you trying to achieve? — David Thomas, Nov 26 '13 at 18:03
Just to hide/override the `.ui-sortable-column-icon` class from the last ``. Mistakenly written, *Removing CSS classes*, sorry. — Tiny, Nov 26 '13 at 18:11

Josh Crozier · Accepted Answer · 2013-11-27T20:01:08.057

2

If you want to dynamically remove the class from the last span element, here is some jQuery:

$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');

jsFiddle example

If you want to remove the class from all the span elements:

$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');

jsFiddle example

Based on your update, it seems as though you want something like this though.

#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
    /* style */
}

Using the :not selector, you can exclude styling from the last span element.

jsFiddle example

edited Nov 27 '13 at 20:01

answered Nov 26 '13 at 18:23

Josh Crozier

233,099
56
391
304

Sorry, `:not(:last-child)` works on Chrome and FireFox but it doesn't work on Internet Explorer (I have tried on Internet Explorer 8). – Tiny Nov 26 '13 at 18:57
1

jQuery is just going to make the immediate task easier, you can instead do this with pure JavaScript or another JS library. Regardless, the answer is simply that you need JS in some form to dynamically change the classes. – ajp15243 Nov 26 '13 at 19:10
@JoshC My point was that *JavaScript* is OP's only choice. jQuery is an additional option onto that if OP so wants to use that library. – ajp15243 Nov 26 '13 at 19:13
May I know why does this, `$('#form\\:dataTable\\:discountStartDate').removeClass('ui-sortable-column-icon');` not work (when `> span:last` is removed)? I expect it to remove the specified class from both ``. – Tiny Nov 27 '13 at 18:43
@Tiny Because then it is removing the class from the parent: `#form\\:dataTable..` You are wanting it to be removed from the child elements, therefore the `span` is needed. If you are trying to have the class removed from all `span` children, just removed `:last`. See this http://jsfiddle.net/JoshC/Lb6K8/ – Josh Crozier Nov 27 '13 at 18:45

score 1 · Answer 2 · answered Nov 26 '13 at 18:07

1

You can use CSS to select the last element, or every other element depending on your needs.

#form span:last-child {
    display: none;
}

answered Nov 26 '13 at 18:07

Elijah Murray

2,132
5
30
43

Sorry, `:not(:last-child)` works on Chrome and FireFox but it doesn't work on Internet Explorer (I have tried on Internet Explorer 8). – Tiny Nov 26 '13 at 19:00
@Tiny IE8 may be a requirement for you, but just as an FYI `:last-child` does work in IE9+. – ajp15243 Nov 26 '13 at 19:05
Yeah, it's CSS3 so it doesn't work with IE8. You can use jQuery to either remove the last element, or add a special class to the last element in the list of spans, and then style that class. – Elijah Murray Nov 26 '13 at 19:05
@ElijahMurray I don't think it's part of the CSS3 spec. For instance, [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) and [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) have the same existence in the Selector spec (see the links), but `:first-child` is supported by IE7+. It is more likely that Microsoft didn't want to implement `:last-child` in IE7/8, rather than it being a part of a later spec. – ajp15243 Nov 26 '13 at 19:08
1

See the first answer [here](http://stackoverflow.com/questions/10800498/lilast-child-doesnt-seem-to-work-in-ie8) – Elijah Murray Nov 26 '13 at 19:11
@ElijahMurray Was that directed at me? I wasn't saying `:last-child` was supported in IE8, I was saying that it's not part of CSS3 because the paired `:first-child` selector is supported in IE7+, while `:last-child` is not, and since they were defined in the spec at the same time (before CSS3), it was a browser choice not to implement it, not a spec limitation. – ajp15243 Nov 26 '13 at 19:15

Hide/override CSS classes dynamically

2 Answers2

Linked