Fairly new to CSS, so please bare that in mind

I've noticed when messing around with my forum's CSS that on occassion the same classname is defined more than once. The difference being that these additional classnames have br and a on the end (see example)

.classname { styling }
.classname br { styling }
.classname a { styling }

What do the 'br' and 'a' indicate?

Thanks in advance.

I think this syntax is wrong.
You can specify different value for a given class, but differentiated by elements.

But the syntax would be

.class{...} /* apply to every elements with that class*/
br.class{...}  /*applies only to br*/
div.class{...}  /*applies only to div*/

But the selectors can be way more precise than this.
You can have :

h3 > div {} /*every div's that are into an h3 element*/
a[specialAttr] {} /*to every a elements who have an attribute named "specialAttr"*/
a[attr|="fir"] {} /* to every links where the attribute "attr" starts with "fir"*/

I have always found Dave Child's cheat sheet pretty clear and helpful:
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Thanks, tripy, but I don't understand a single word you just typed. I did warn you.

This is from my forum's CSS

.ak_poll_table_header {
background-color: #ddcccc;
height : 22px;
padding : 0 25px 0 5px;
font-size : 12px; color: #000;
text-align: left;
text-transform: uppercase;
}
.ak_poll_table_header br {
display : none;
}
.ak_poll_table_header a {
padding-left : 11px;
}

What are .ak_poll_table_header br and .ak_poll_table_header a targeting, that .ak_poll_table_header on its own isn't?

I'0m in no mean a css expert, but I'd say that having it wrote

.ak_poll_table_header a

would means "every <a> elements and every elements with the class "ak_poll_table_header".

At contrario, if it would be wrote

a.ak_poll_table_header

it would mean that the specific code would only be applied to <a> elements with the class ak_poll_table_header

.ak_poll_table_header a

I would say this meant any a tag in something which the class name of ak_poll_table_header

This is a method to target areas of your document using less id's and classes overall.

This method will "aim" for items nested within a certain id or class. Here is an example, let's say you wanted to style an anchor, but ONLY an anchor within a div with a class of "info":

<div class="info">
<p>hello</p>
<ul>
<li><a href="#">item 1</a></li> <!-- you want to style this anchor -->
</ul>
</div>

In your css you could target this anchor by:
.info ul li a {
/* this is styling that applies to the anchor above */
}

Do you see how I didn't have to create a special class for that anchor? Plus, in my css I can clearly see what area of the document I am styling. Very helpful for css that runs into hundreds of lines of code.

This is called using the DOM(document object model) you can visit http://www.w3schools.com/js/js_obj_htmldom.asp

.classname { styling } - any element with the class "classname"
.classname br { styling } - any "br" tag inside an element with the class "classname"
.classname a { styling } - any "a" tag inside an element with the class "classname"

Thanks very much to you all. Those explanations have made it far clearer now