How can I style specific symbols in an element?

Clearly we can accomplish far more than most are aware of, without almost scripted neglect in our collective knowledge base. As an aside, it would be nice if Stack quotation marks were more legible.

Moving forward, perhaps to cover our bases better, the CSS should look like this.

quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '201C' '201D' '2018' '2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '201C' '201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; } 
blockquote p::before { content: open-quote; } 
blockquote p::after { content: no-close-quote; }

Google finds many people unable to style the simple quotes. Still looking for contraction code: i.e., root’extension possessive single right curly quote styling. Can current DOM handle contraction single right quote without script... what's that trick?

Quotes require ‘possessive’ punctuation. In “[Css The Definitive Guide 4][1]”, pp. 786-788, Eric Meyer describes ‘Generated quotes’.

With quotes, you can define quotation patterns to as many nesting levels as you like. In English, for example, a common practice is to start out with a double quotation mark, and a quotation nested inside the first one gets single quotation marks. This can be recreated with “curly” quotation marks using the following rules:

quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '201C' '201D' '2018' '2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }

<quotation>
<quote>
    In the beginning, there was nothing. 
    And God said:
    <q>
        Let there be light!
    </q>
  And <abbr>there&rsquo;s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>

“In the beginning, there was nothing. And God said: ‘Let there be light!’ And there was light.”

The hypotheses (nor acronyms) used in English abbreviation contractions do not respond to Meyer's simple quotation CSS. That's where ’ and ” are useful, working with the quotation, [abbr and acronnym][2] elements. Note that ABBR element (e.g., WHO) is distinct from the abbr attribute (it's one, he's done).

Note also that Apple device keyboards use Option and Shift-Option keys pressed-together with [ and ] keys to generate English opening and closing curly quotes respectively, in this and many other web environments. Meyer's CSS and simpler Apple keyboard shortcuts work well for ‹other languages›, such as French quotation punctuations.

Other devices and networks may similarly adapt or even block the simple display of HTML and CSS quotation code (and related punctuation). There's nothing wrong with offering HTML/CSS guidance, where appropriate. Curly quote styling can encompass more than simple quotes.

[1]: https://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410. Meyer and Weyl ©2018.

[2]: https://maxdesign.com.au/news/abbreviations/ ...no discussion of block elements that are a foundation of written language quotations. Contraction and quotation, CSS technology character string focus tends to ignore mainstream curly quotes development. Meyer being an important exception.

 .client_message:before {color: red;font-weight: bold;content: "“";}

 .client_message:after {color: red;font-weight: bold;content: "”";}

If you can use JavaScript you could change the HTML to

<div><q>Ankit</q></div>

(mentioned in comment before)

Now selecting the elements is easy

q {
    color: red;
    font-weight: bold;

}

div.client_message:before {
    position: absolute;
    z-index: 2;
    overflow: visible;
    left: .0em;
    color: red;
    background-color: white;
    font-weight: bold;
    content: "“";
}
div.client_message:after {
    position: absolute;
    z-index: 2;
    overflow: visible;
    right: .0em;
    color: red;
    background-color: white;
    font-weight: bold;
    content: "”";
}
div.client_message {
    position: relative;
    display: inline;
    z-index: -1;
}

css has a content property and a :before and :after selector class, you can use these to insert and style the quotes.

note CSS content property is not supported is old IE's less than version 9 http://caniuse.com/css-gencontent

EDIT You have to do a bit of fudging in the CSS but you can get it to work http://jsfiddle.net/wtceu/

EDIT 2 I've put a background-color so that the tails from the HTML entity quotes don't show through the new overlapped quotes. The only issue is if the text takes up more than one line, the ending quote won't position correctly (you can reproduce this by shrinking the width of the jsfiddle window).

You can't. CSS has very limited capability when it comes to selecting things which are not elements.

The nearest CSS has is ::first-letter, but that would select “ A.