Add css with if not child class condition

Question

Hi please see the following two html codes:

<div class="price">
  2
</div>

And:

<div class="price">
 <div class="symbol">£</div> 2
</div>

So in the first one I want to add £ to the price so I am using this CSS

  .price::before {
     content: "£";
  }

And it is working . But I don't want this if .symbol class is already present in .price class. Is there is any way to do this in CSS?

Why can't you add .price > .symbol {display: none;}? This way you always showing the symbod via css only — Alon Eitan
– Alon Eitan, Commented Feb 10, 2018 at 6:34
@Alon Eitan: Could be because the symbol isn't always £, and they just want £ to be the default when otherwise not specified. But if prices are always in £, then your solution is ideal. — BoltClock
– BoltClock, Commented Feb 10, 2018 at 6:45

Bhuwan · Accepted Answer · 2018-02-10 08:03:18Z

1

If you are applying £ symbol as default and .symbol for the different symbols as @BoltClock mentioned in the comments

You can use pseudo classes with position:absolute combination...

You have to apply position:absolute to both pseudo element and symbol class at the same position. If there is no symbol class, the pseudo element :before will be visible and if symbol class is there, it will be visible above pseudo element :before

Here the tricky part is the setting background-color:white of the .symbol class

Stack Snippet

.price::before {
  content: "£";
  position: absolute;
  left: 0;
}

.price {
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

.symbol {
  position: absolute;
  left: 0;
  background: #fff;
}

<div class="price">2</div>
<br>
<div class="price">
  <div class="symbol">$</div> 4
</div>

edited Feb 10, 2018 at 8:03

answered Feb 10, 2018 at 6:59

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abilash Erikson Over a year ago

i don't understand the answer fully , but i think it will be good one . If you can make a example in jsfiddle jsfiddle.net , it is better .

Bhuwan Over a year ago

@abilasher you have to apply position:absolute to both pseudo element and symbol class at the same position. If .symbol is there it will be on top of pseudo element :before Fiddle Link

Andry · Accepted Answer · 2018-02-10 06:48:56Z

1

You can achieve this in pure CSS:

.price::before {
     content: "£";
} 

/* Do not show the symbol if contained into a price element */
.price > .symbol {
  display:none;
}

Why

So, CSS selectors work in a way for which a selector can only query an element's parents or siblings. It is not possible to create a selector which act by querying the children of an element. You have to reverse the order. That is why, you work on the .symbol class and show it or hide it.

answered Feb 10, 2018 at 6:48

Andry

16.9k30 gold badges158 silver badges267 bronze badges

Comments

AddWeb Solution Pvt Ltd · Accepted Answer · 2018-02-10 06:36:54Z

0

You can check this class via jquery it is good aproch.

if( $('.price').hasClass('symbol') ) {
  // ...
}

answered Feb 10, 2018 at 6:36

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

2 Comments

Alon Eitan Over a year ago

Only that this question is not tagged under jQuery

Abilash Erikson Over a year ago

stackoverflow.com/questions/49669738/…

void · Accepted Answer · 2018-02-10 06:43:28Z

0

You can not achieve this using CSS only. You need a bit of jquery here.

What my jQuery code is doing is it is adding class .symbol-present to .price which has .symbol element and my CSS code is then adding symbol accordingly.

$(".price").addClass(function(){
  return $(this).find(".symbol-present").length > 0 ? "symbol":"";
})

.price:not(.symbol-present)::before {
  content: "£";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
  2
</div>

<div class="price">
  <div class="symbol">£</div> 2
</div>

answered Feb 10, 2018 at 6:43

void

36.8k10 gold badges72 silver badges111 bronze badges

Collectives™ on Stack Overflow

Add css with if not child class condition

4 Answers 4

2 Comments

Why

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Why

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related