Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.

The sample of HTML code is:

<div class="attr-marker">
    Some-text-content        <!-- Apply New Styling on it -->
</div>

<div class="attr-marker">
    <!-- No need of new styling -->
</div>

<div class="attr-marker">
    <!-- No need of new styling -->
    <i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>

And the CSS which I tried but failed is:

.attr-marker text {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
}

I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.

You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.

Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.

Here's an example:

.attr-marker:not(:empty) {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
}

Let me know in case you have any questions.

Regards,

AJ

You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.

Like...

<div class="attr-marker"></div>

not

<div class="attr-marker">
</div>

And then the css would be,

.attr-marker:empty {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
}

Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.

Edit:

If you know exact position of your element then you can select it with nth-child pseudo-class:

.attr-marker:nth-child(1):not(:empty) {
  border: 1px solid #333;
  background-color: yellow;
}

Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.

There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):

.attr-marker {
    /* text properties */
    /* some other properties */
}

Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.

That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.

As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.

If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:

.attr-marker {
    display: block;
    max-width: 12px;
    max-height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
    /*If required*/
    overflow:hidden
}