Let’s Get Deep In CSS Selector part 2

Photo by Afif Kusuma on Unsplash

we have talked about some css selector before, but there were many kinds of css selector that could be used by us. What is it? Let’s know it.

# Pseudo Classes

Before we are going to know the property of pseudo-class, we have to know what is pseudo-class?

A pseudo-class is a keyword added to a selector that specifies a special state of the selected that specifies a special state of the selected elements.

Source from MDN Mozilla

Pseudo class has many of properties for selecting element to have special state, but we would just talked some of them.

  • Hover (:hover)

The :hover matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Look demo at codepen

Note: The :hover has problem with touchscreen. Depending on the browser, the :hover might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches other element.

  • Active (:active)

The :active represents an element that is being activated by user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button. The :active is generally used on a tag ( <a> ) and button tag ( <button> ).

Look demo at codepen

  • Focus (:focus)

The :focus represents an element that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with keyboard’s tab key

Look demo at codepen

  • First Child (:first-child)

The :first-child represents the first element among it’s siblings from it’s parent. So, you could use it to style the first element among it’s siblings.

Look demo on codepen

  • nth-child (:nth-child)

the :nth-child matches based on their positions on their siblings, it would be integer’s number, math operation or even and odd position.

Look demo on codepen

  • Last child (:last-child)

The :last-child matches with any element in the last child of it’s parent.

The Photo was from GoalKicker.com

Actually there was many propeties of pseudo-class that we could use it, like :checked, :root, :link, :visited etc. You could read it on MDN Mozilla.

For any advise or any recommendation for the next article, you could leave the comment below. And don’t hesitate to follow and subscribe for getting new updates from me.

connect with me on my social media

pinterest

instagram

Support me by buying the product from affiliate’s link below:

affiliate

Blogger and Content Creator. #buildnewkills #getnewfriends #trynewexperiences