Selecting all but the last element with specific class

Question

I need to apply a style to text in all children divs except the one that has a span with class .fa

.parentDiv > .column :not(.fa) {
  font-weight: bold
}

<div class="parentDiv">

  <div class="column">aaa</div>
  <div class="column">bbb</div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

I do need to keep CSS in one line as it's a part of a larger style sheet. How do I do that?

obligatory [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) You need to override the style instead. something like `.parentDiv > .column { font-weight: bold }` and then `.parentDiv > .column .fa { font-weight: normal }` — Joseph Marikle, Feb 09 '16 at 21:56
Sorry, bad habbit. I use jQuery all the time in other issues. — santa, Feb 09 '16 at 22:07

Farzad Yousefzadeh · Answer 1 · 2016-02-09T21:58:22.777

1

The only way to do this is to use

.parentDiv > .column { font-weight: bold }
.parentDiv > .column > .fa { font-weight: normal }

edited Feb 09 '16 at 21:58

answered Feb 09 '16 at 21:57

Farzad Yousefzadeh

2,461
1
20
27

1

This assumes that if a `.column` has a `.fa`, it won't have other contents without `.fa`. – Oriol Feb 09 '16 at 21:58

dippas · Accepted Answer · 2016-02-09T22:07:36.117

1

You can use :not with :last-of-type

Snippet

.parentDiv > .column:not(:last-of-type) {
  font-weight: bold;
  color:red;
}

<div class="parentDiv">

  <div class="column">aaa</div>
  <div class="column">bbb</div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

EDIT based on @Oriol's comment

:not(:last-of-type) does not mean "doesn't contain a .fa

which makes sense, if your code could be dynamic.

here is another approach:

Snippet

.parentDiv > .column span:not(.fa) {
  font-weight: bold;
  color: red;
}

<div class="parentDiv">
  <div class="column">
    <span class="gsdfasd">text</span>
  </div>
  <div class="column">
    <span class="faadsasfa">some text</span>
  </div>
  <div class="column">
    <span class="fa">this will NOT BE red</span>
  </div>
</div>

edited Feb 09 '16 at 22:07

answered Feb 09 '16 at 21:58

dippas

58,591
15
114
126

1

`:not(:last-of-type)` does not mean "doesn't contain a `.fa`". – Oriol Feb 09 '16 at 22:00
@Oriol given OP markup only the last column contains `.fa` Unless OP markup is dynamic, this will do what OP is looking for – dippas Feb 09 '16 at 22:02
This is exacly what I need! Thanks. – santa Feb 09 '16 at 22:06
1

No need for edits. I am working on existing page and will not be wrapping text with spans. Original solution did the trick! – santa Feb 09 '16 at 22:14

score 0 · Answer 3 · answered Feb 09 '16 at 21:58

The way the not() selector works is that you have to target a specific element/class/ID. You would have to wrap the text from each column in a span and then add the :not(.fa) CSS to the span:

.parentDiv > .column span:not(.fa) {
  font-weight: bold
}

<div class="parentDiv">

  <div class="column">
    <span>aaa</span>
  </div>
  <div class="column">
    <span>bbb</span>
  </div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

Selecting all but the last element with specific class

3 Answers3

Snippet

Snippet