Style widget content differently to bulleted text
 

From what I can gather (and don't take my word for it as I am VERY new at this) the 'content' in widgets is styled by the list tag <li>. I can change this via the theme editor under the Widgets tab and then in the Widget Content box.

I liked the way the theme had the sans serif fonts when I first installed it, with a black tint for some of the entries. However, since the content in the widget uses the <li> tag, this is the way my bulleted text in the body of my posts is formatted. This is not what I want.

So I added the following to the 'CSS Inserts' box to fix up my bullets:

li {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}

So now my bullet points are the way I like them, matching my body text and using the graphic I wanted. But we always want just that little more than we have, don't we? Sigh.

Now, my sidebar information (under Just Added, Recent Comments, Categories etc.) is styled the same way as my bullet text is except for the colours which I think are overridden by the settings at the bottom of the Widgets editing page. I would like to be able to control the fonts in the widgets without destroying my bullet style.

What to do? Back to Google. I found an easy way to define a class and now have the following in my CSS Inserts:

li.pk {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}

Now, I can style my widget content via the theme editor and when I want my style of the bullets in my posts, I just have to remember to put the appropriate opening tag at the beginning of my bulleted text being. This opening tag is: <li class="pk">

Voila! Perfect. Am I boring you? Hope not, because I have not finished my tale of woe. What is it they say? Right. You can't have too much of greed.

NOW, my greedy soul is not happy about having to remember to use the <li class="pk"> opening tag! I mean to say, how lazy can one get?

So wake up now, here comes my question.

Rather than having to use that long winded tag every time I want to style my bulleted text, is there a way I can use the long winded tag in the theme editor>Widgets>Widget Content Box to have it style my widget content and continue to use the normal way of defining my bulleted text in the text editor?

Phew! Hello? Hello? Please don't ignore this. Are you still there?

So you want to apply this to all widget? Then use

div.widget li

instead of

li.pk

Or, to address specific widgets only, use this

div#id-of-some-widget li,
div#id-of-another-widget li {
...
}

You definitely don't need to manually add your own class each time. Nearly everything in each widget already has classes or ID's. If not, then you usually can access a certain property through its parent, as shown in the example above. There's no need to have a class directly on the specific property.