Question

I have a css-problem I really don’t seem to understand 🙂 I have been styling css for three years now, but I’ve never had this problem.

I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of “.page a” instead of using the “.page_child_title” (and I for one do not agree with my browser). The color of “.page_child_title” is applied correctly however. Below you can find the Html and css I’m talking about.

Html

<div id="page" class="page Jobs">
    <div class="page_child">
        <a class="page_child_title" ...

Style.css

.page p, .page ul, .page a {
    font-size: 10px;
    text-align: justify;
}
style.css (line 208)


.page_child_title {
    color: #006633;
    font-size: 12px;
}
style.css (line 262)

I have already tried replacing “.page_child_title” with “.Jobs a” but this didn’t work. Then I tried declaring “.page_child_title” before “.page a”, same result, so now I’m kind of stuck. Does anyone know what could be causing this problem?

Answer 1

It would seem to me that selecting an element by its type rather than classname would be more specific.

Try changing .page_child_title to a.page_child_title

Example.