I have this :
<div class="foo">
<h3>Title</h3>
Some text I want to select using a CSS selector.
<div class="subfoo">Some other text</div>
</div>
Is it possible to select only "Some text I want to retrieve using a CSS selector" using a single expression of CSS selectors ?
It's not possible to do in a clean manner with pure CSS.
As Vangel as suggested I recommend setting the styling for it in a .foo
selector then apply overrides for other elements:
.foo{
//Some text styles
}
.foo *{
//Overriding styles
}
However the best option would be to make changes to the HTML to place the text in its own element so it can be styled in isolation:
<div class="foo">
<h3>Title</h3>
<span>Some text</span>
<div class="subfoo">Some other text</div>
</div>
.foo span
{
//Some text styling
}
You could just add
.foo {
color: red;
}
and then override if you want different styles at span or .subfoo
I Will suggest you to use reverse methodology.
Set inherit color to text which is not in the tag (red) and the different color for all text which is not in the tag.
.foo > *{
color: black;
}
.parentColor{
color:red;
}
<div class="parentColor">
<div class="foo">
<h3>Title</h3>
Some text I want to select using a CSS selector.
<div class="subfoo">Some other text</div>
</div>
</div>
check fiddle