Typography - pseudo classes or spans - Best practice?

General Discussion
1

Following various mentions of pseudo-classes within this forum I have started to look for guidance.

The Blocs Academy has a Vimeo on using a pseudo class for the first-line of text which works as expected.
But it does seem of limited use when I can Span any text, no matter the length or placement, and apply a class to the span to make changes to that text.
What are the differences and advantages of one over the other?

Secondly, outside of typography, I can see the usefulness of pseudo-classes. Can I take any of the classes listed on W3 and add them to a class in Blocs, as instructed in the Academy video? Or are we limited to the ones Norm has chosen, and if so where do I locate these?

And … Norm’s academy specifies :first-line, W3 says ::first-line. How much do those colons matter? Can first-line be a class as well as an element?

2

There are

  • Pseudo Classes
  • Pseudo Elements

Not to be mixed up, as they are different.

Pseudo class uses a single colon : and a pseudo element uses two ::

Norm’s video is wrong! Although, modern browsers can usually resolve a mis-use of the colon, but it’s best to keep to the standard.

I should point out, it’s easy to assume that ::first-line is a pseudo class, as you would think it was like (the pseudo class) :first-child, but it’s definitely not, it is a pseudo element.

Pseudo Classes

Select and style elements based on state and position, eg…

State
:hover, :focus, :active…

Position
:first-child, :nth-child…

Pseudo Elements

Allow you to insert content before or after an element, style specific parts of an element, amongst other things.

::before, ::after, ::first-line, ::first-letter

It appears some things are supported in the class editor, I have asked several times for a list, but we have never got one. So Its a matter of trying and see what works :rofl: So it’s the standard mystery.

You can style a pseudo element based on the state of its related element using for example

.my-class:hover::before

So there are lots of cool things you can do with Pseudo elements. (adding the above example in the class editor works, as I have used it many times.)

3

Many thanks Pete for finding the time for this info.

You have provided many starting points for my walks round the Blocs with the pseudos.
Begining with two colons where Norm says one, and calling it an element. Though I may stick to spans+class for customising bits of text in a paragraph as they give more options.

If you ever get to uncover the mystery, or get hold of the oft-asked for list, I hope to see it revealed here.

And whilst here I would also like to thank you for your videos on making better contact forms and buttons, showing me the way to give some new styles to the basic issue. Pseudos look to be another step along that path.

Best wishes Richard

1 Like
4

If not mistaken single semicolons go back to CSS2 and you can still use them if you need to have IE8 support.

5

I think I made a basic video on this but might not have uploaded it.

I have a few videos I want to get too. Some more buttons for sure. You can do some neat things with pseudo elements on buttons.

1 Like