Child then adjacent selector?

[JamesDuncombe]

Hi guys,

I was wondering whether anyone knew the answer to this one.

I was playing about last night and I couldn’t target the following paragraph element (the one in the snippet):

Code:

Fillz, 15 Bell Street, Reigate

February 10th, 2010

Yes, this is in WordPress :). I just wanted to target the date and change it’s colour. The rest of the blog post then follows that element and then the next post etc then it’s div is obviously closed off.

Anyway, so I tried the following:

Code:

h2 > a + p { color: #5F5F5F; }

And this…

Code:

h2 > a[href] + p { color: #5F5F5F; }

Nothing. Any help would be cool. Obviously I could just add a class to the date which I’ve currently done but I really wanted a clever CSS selector way of doing this.

Cheers,

James

[Rob MacKay]

I would do this…

Code:

div.post h2 + p { color: #5F5F5F; }

[JamesDuncombe]

Hi mate,

Cheers for that. Don’t think I explained it correctly though…

Basically, when you first view a list of posts in WordPress you get the h2’s with links inside. The next paragraph element is the post date.

Now, when you click on the h2 with the link inside it and go to the next page (the single post view) you get an h2 with the post title BUT no date underneath, so with the adjacent selector it makes the whole first paragraph #5f5f5f :(

I hope that makes some more sense…

Basically the difference between the two is:

Code:

Fillz, 15 Bell Street, Reigate

February 10th, 2010

Fillz is a small sandwich bar and coffee shop…

…for the main page (with the anchor in the h2). Then for the single post page:

Code:

Fillz, 15 Bell Street, Reigate

Fillz is a small sandwich bar and…

So, I need to find a way of targeting the paragraph only if it’s preceded by an h2 with an anchor inside.

Something like: h2 > a + p { color: #5f5f5f }, so that if there’s no anchor in the h2 don’t make the next paragraph element #5f5f5f.

I know it’s picky but I was just wondering whether CSS could do this :)

[Rob MacKay]

Ahhhh yes – of course I see your issue there.

The problem with h2 > a + p { color: #5f5f5f } is that its finding the child a inside the H2 then looking for its p sibling – which isn’t inside the H2.

[JamesDuncombe]

Exactly…

Tricky one ay? It’s like it needs to go in there to look at it then come back out again like:

Code:

h2 > a < + p { color: #5f5f5f; }

If only it was that easy :)

[Rob MacKay]

hahah

In that case, because I think you basically dont have enough to work with… you should just do this in the template…

<?php the_date(‘Y-m-d’, ‘<p class="date">’, ‘</p>’); ?>

:P

[JamesDuncombe]

Hehe,

Yeah, think it’s gonna have to be a class :(. Ah well!

Cheers mate,

James

[TheDoc]

In this case, I’d prefer using a class anyways. That way, if you change the structure of the site later on, you don’t need to go back and start changing all of your CSS.

[JamesDuncombe]

That is a very good point!

Cheers,

James

[Author]

Posts