selector help

Resolved scorendesign
(@scorendesign)

9 years, 4 months ago
This snippet shows a pseudo selector (::after) that my theme inserts with every post header:

If I want to mimic this style, how do I add the ::after selector?
- This topic was modified 9 years, 4 months ago by scorendesign.
- This topic was modified 9 years, 4 months ago by scorendesign.

Viewing 11 replies - 1 through 11 (of 11 total)

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 4 months ago
See http://www.w3schools.com/cssref/sel_after.asp

The selector for this would be

h1.posttitle:after {} or .posttitle h1:after {} (Without trying, I’m not sure which is correct.)
- This reply was modified 9 years, 4 months ago by Steven Stern (sterndata).
Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

Sorry. I may have mis-lead you about what I was looking for. Rather than controlling the style, I want to incorporate the ::after selector along with any h1.posttitle I manually create in my html. How do I use the ::after selector in my html?

Here’s a solution that gives the result I want, but it’s not utilizing the ::after style already set by my theme:

Thanks.

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 4 months ago

You don’t need to incorporate it into your HTML. If you use an :after selector in your CSS, the content of that selector will appear.

Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

So, here’s how my theme styles post titles:

And here’s my solution to manually style any text in the same way:

<header class="post-header fix"><h1 class="posttitle">ABOUT US</h1></header>

Seem correct?

Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

I still don’t understand how the theme inserts ::after in the html or why I don’t need to insert it in my html. It appears to be a clearfix.

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 4 months ago

You do not put ::after in your html. Period.
Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago
Ah! It’s in the theme’s css! Sorry! I get it now.
```
.fix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
```
Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

Thanks! Got it.

Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

I was confused by why it showed up in my Inspector.

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 4 months ago

The inspector does not necessarily show you the exact HTML.

Thread Starter scorendesign
(@scorendesign)

9 years, 4 months ago

Lesson learned.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘selector help’ is closed to new replies.

selector help

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics