CODEWITHSUNDEEP
htmlcss
santa
santa

Reputation: 12512

Selecting all but the last element with specific class

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?

Upvotes: 1

Views: 51

Answers (3)

dippas
dippas

Reputation: 60603

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>

Upvotes: 1

APAD1
APAD1

Reputation: 13666

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>

Upvotes: 0

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2561

The only way to do this is to use

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

Upvotes: 1

Related Questions