CODEWITHSUNDEEP
htmlcss
m.umar
m.umar

Reputation: 955

class defined inside h1 not responding to css

I am using the toolbox theme for wordpress. This is the code used to display the title of each post on the blog page inside an h1 tag

<h1 class="entry-title"><a href="<?php t he_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php     the_title(); ?></a></h1>

It is displaying the titles correctly on the page but when i try to edit the appearence of these titles by using css, there is no change, the color still remains blue:

.entry-title {color:#000;}

There is a strange blue underline beneath the title too, i would also like that to be removed.

Here's the html output of that page:

<header class="entry-header">
<h1 class="entry-title">
<a rel="bookmark" title="Permalink to Haley Joel Osment to Try Acting As a Grown Up in New…" href="http://localhost/wordpress/featured/haley-joel-osment-to-try-acting-as-a-grown-up-in-new-6/">Haley Joel Osment to Try Acting As a Grown Up in New…</a>
</h1>
<div class="entry-meta">
</header>

Upvotes: 1

Views: 13585

Answers (4)

Christopher Will
Christopher Will

Reputation: 3064

The class declaration .entry-title does not affect the links within the h1 element. If you want to address the links inside the h1 element you have to use the selector h1.entry-title a.

Example to remove the underlines and set the color explicitly:

h1.entry-title a { text-decoration:none; color:red; }

PS: In this context the prefix h1. might be optional, but it offers a more specific differentiation.

Upvotes: 2

element119
element119

Reputation: 7625

If you have an <a> within an <h1> tag and style the <h1>, the <a> will use it's inherited styling and may not follow the styling of the <h1.

Perhaps you might want to just style the <a> elements within .entry-title:

.entry-title a{
//styles
}

If it still does not respond, it is possible that there is an issue of specificity, in which case you will want to use !important on the .entry-title style.

EDIT To remove the blue line from underneath the link on hover, you'll probably want to remove link text decoration:

.entry-title a:hover{
    text-decoration:none;
    // other styles
}

Upvotes: 2

Bojangles
Bojangles

Reputation: 101473

The problem you're having here is that the browser will put it's default style onto the <a> inside the <h1> for accessibility reasons and possibly something else.

Ideally, the <a> should go outside the <h1>, like this:

<a href="<?php t he_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
    <h1 class="entry-title"><?php the_title(); ?></h1>
</a>

Upvotes: 1

andyb
andyb

Reputation: 43823

Sounds like there is another rule with greater specificity that is overriding your rule. Either add a !important to your rule (.entry-title {color:#000 !important;}) or change the selector (the .entry-title) part to have a greater specificity.

For example, with Chrome you can Inspect the element by right-clicking on the element and selecting Inspect element from the context menu. You should be able to see what other CSS rules are being applied to your element which will help track down what other rule might be applying to the element and overriding your style. Most other modern browsers have a similar development tool for inspecting HTML, CSS and JavaScript.

Upvotes: 0

Related Questions