entry-title

[sharonq]

Jason:

the CSS class “entry-title” is used both in the header of the page and for the tile within a post grid. If I change the CSS it impacts both.

How can I change the background and font color for my page/post tile but not for the post grid title. Sorry about the multiple questions – these are all things I’ve been working on and am stumped. I was using h1 for the page title and h2 for the page grid title but there must be a better way.

Topic

[Jason Bobich]

With your inspector, have a look at the HTML markup that surrounds the post grid and then the post list. What classes do you see on the surrounding HTML of a post list and a post grid that are different? What could you using to target the “entry-title” class in the two unique situations?

[sharonq]

That took a while:

I ended up using

.entry-header .entry-title

So – this would mean that the css only applies when the object has *both* classes – was that correct?

Initially I was using .entry-title h1 which worked on the font but not the background – and then it got messed up with the link/no link titles (which are gone), then I tried using #header and .header with .entry-title and .entry-header and finally put the two together.

CSS is a tricky beast – when you understand it it seems so easy -but there are so many options it’s easy to get lost.

My CSS file is getting bigger and bigger as I add customizations. I comment a lot to try to keep it all sorted out.

Thanks for all the tips – I am doing as much as I can on my own but still get stumped once in a while.

[Jason Bobich]

.entry-header .entry-title

So – this would mean that the css only applies when the object has *both* classes – was that correct?

What it means that the element with class “entry-title” would need to be inside another element with class “entry-header” like this:

<div class="entry-header">
      <div class="entry-title">
          ...
      </div>
</div>

If you wrote it like this: .entry-header.entry-title (notice NO space between the selectors)

… Then it means the element you’re targeting has both classes, like this for example:

<div class="entry-header entry-title">
    ...
</div>

[sharonq]

Thanks Jason – that helps a lot – and explains why combining the two did not work the first time I tried – I reversed the order…

[Author]

Replies