CSS Pseudo Classes
Pseudo-classes
are not something new. I call them pseudo selectors. They help us to style
elements base on elements’ state. Every pseudo-selectors begins with a colon :.
Let’s take a look at the example below. The selector :empty will select every
elements which is empty.
CSS code:
HTML code:
Result:
See the Pen Empty Your Cup by Kei Nart (@codenart) on CodePen.
That’s it. A pseudo class is nothing more than a selector. But, in order to use
pseudo-classes more precisely and effectively, we should combine them with other
selectors (use intersection):
p:empty, .section:empty, a:hover, etc…
Here is the reference list of pseudo-classes: Full list of pseudo-classes.
Let’s pick another pseudo-class to practice. This time we’re gonna use :hover.
This one is very common used for styling links and buttons. But, we can also use
it for other stuff.
HTML code:
CSS code:
Result:
See the Pen Full-time Dreamer by Kei Nart (@codenart) on CodePen.
Have you touched that? :D
As you see that pseudo-classes are not really something new. It’s easy to get the idea about how they work. So, We’re not going to make examples for every one of them. Just save the reference link for future uses or you can quickly parse the link to pick out some and playing around with them.
Pseudo Elements
Oooops! I’ve not mentioned pseudo-elements in the headline. I’m sorry for this sudden plan because I just have a strong feeling that pseudo-elements are somewhat related to pseudo-classes. :D
CSS allows us to insert some fake elements into webpages. Search engines like
Google, Bing, etc… won’t see the content inside those elements. It’s because
pseudo-elements are only used for styling purposes.
The example below will insert a pseudo-element right before each member of the
class .entry.
CSS code:
HTML code:
Result:
See the Pen Pseudo Separators by Kei Nart (@codenart) on CodePen.
As you see that, pseudo-element’s syntax looks quite similar to pseudo-class’s.
I also consider pseudo-elements as selectors. Just imagine that our websites are
full of hidden fake elements and we just select them using some special
selectors and make them visible.
In the example above, ::before is used to insert (or select) pseudo-elements
before the selected elements. We can also use ::after to select pseudo-elements
after the selected elements.
Besides, there are 3 more pseudo-elements available in the current version of CSS:
::first-letter- select first letter of an element::first-line- select the first line of an element::selection- select the portion of text of an element that is selected by user
You can try those pseudo-stuff with some <p> elements to visualize a newspaper. :D
Our tutorial about Pseudo Classes & Pseudo Elements has finished. In the next tutorial, we’ll meet the width & height properties again. Yes, we’ve used those properties many times since the early tutorials. But, to keep things simple at the beginning, I’ve not mentioned something about them. :D