I use Stylish to increase various font sizes on SE. (This seems to work better than zooming the site, which sometimes breaks other layout.) I can't figure out how to target a post notice for styling (there doesn't seem to be a relevant class).

For example, this question has two annotations, a post notice and a protection notice. The HTML source for the former is:

        <td colspan="2">
            <div class='question-status'>
                <p>We&#39;re looking for long answers that provide some explanation
                   and context. Don&#39;t just give a one-line answer; explain why your 
                   answer is right, ideally with citations. Answers that don&#39;t include
                   explanations may be removed.

and for the latter is:

    <div class="question-status">
            <b>protected</b> by <a href="/users/7945/jmac">jmac</a>
            <span class="mod-flair" title="moderator">♦</span> 
            <span title="2014-05-30 00:53:39Z" class="relativetime">14 hours ago</span>
            This question is protected to prevent &quot;thanks!&quot;, &quot;me too!&quot;, 
            or spam answers by new users. To answer it, you must have earned at least 10 
            <a href="/help/whats-reputation">reputation</a> on this site.

Overriding font-size on question-status doesn't do the trick. I'm trying to target the actual text of the notices. How do I do that?

(I'm a CSS novice, but so far finding "class=foo" in promising places and attaching styling seems to be working out.)

  • If somebody knows how to fix the formatting to show the actual HTML in those code blocks, I'd really appreciate a fix. May 30 '14 at 19:31

The text on the post notices appear to be wrapped in a paragraph tag, a <p>, which in turn is wrapped inside a div.question-status. With this knowledge, we can build a CSS selector specific enough to target paragraph tags that also happen to be enclosed in these divs:

In the spirit of the Many Memes of Meta for jQuery, here's some jQuery that targets these post notices, both on questions as well as answers, and increases the font size:

$('.question-status p').css('font-size','15px');

In the spirit of using real, actual CSS, you could also target these notices like so:

.question-status p {
    font-size: 15px !important;
  • 1
    Thanks! With the addition of !important that CSS did the trick for me. (And now I know how to specify nested elements in CSS, yay.) Jun 1 '14 at 3:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .