Add css with if not child class condition - html

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?

Answer 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>

Answer 2

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.

Answer 3

You can check this class via jquery it is good aproch.
if( $('.price').hasClass('symbol') ) {
// ...
}

Answer 4

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>