{"id":7323,"date":"2020-06-08T22:27:40","date_gmt":"2020-06-08T20:27:40","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=7323"},"modified":"2020-06-08T11:44:19","modified_gmt":"2020-06-08T09:44:19","slug":"css-pseudo-selectors-you-might-have-missed-bits-and-pieces","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2020\/06\/08\/css-pseudo-selectors-you-might-have-missed-bits-and-pieces\/","title":{"rendered":"CSS Pseudo-Selectors You Might Have Missed – Bits and Pieces"},"content":{"rendered":"

Useful CSS pseudo-classes that are often overlooked.<\/p><\/blockquote>\n

Source: CSS Pseudo-Selectors You Might Have Missed – Bits and Pieces<\/a><\/em><\/p>\n

<\/p>\n

\n
\n

(Pseudo) selectors let you assign styles to what are, in effect, phantom classes that are inferred by the state of certain elements, or markup patterns within the document, or even by the state of the document itself.<\/em><\/p>\n

\u2014 CSS: The Definitive Guide: Eric Meyer, Estelle Weyl<\/em><\/p>\n<\/blockquote>\n

This post is a sort-of encouragement to use more plain CSS and less JS when building your UI. Getting familiar with everything CSS has to offer is one way to achieving that \u2014 another one is implementing best practices and reusing that code, as much as possible.<\/p>\n

Pseudo-Selectors are in categories: Pseudo-Classes and Pseudo-Elements.<\/p>\n

Pseudo-Class acts as if a class has been attached to an element and styles the element on that basis, whereas a Pseudo-Element acts as if an element has been injected into another element and just the injected element is styled.<\/p>\n

Pseudo-Classes has double colons :: while Pseudo-Elements has a single colon :.<\/p>\n

To reuse your UI components try using cloud component hubs like Bit.dev<\/strong><\/a>. Use it to publish, document and organize all your team\u2019s reusable UI components. It\u2019s not only a way to build faster but also a way to build better as it encourages you to standardize and modularize your code.<\/p>\n

\n
\n
\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/div>\n<\/div>

Exploring shared UI components on bit.dev<\/a><\/figcaption><\/figure>\n

::first-line | Selects the first line of text<\/h1>\n

This pseudo selector affects the first line of text before a line breaks. It styles just the first line of text inside it, as if an element was wrapped around just that text.<\/p>\n

p:first-line {\n    color: lightcoral;\n}<\/span><\/pre>\n
::first-letter | Selects the first letter<\/h1>\n
This pseudo selector applies to the first letter of the text in an element.<\/p>\n
.innerDiv p:first-letter {\n    color: lightcoral;\n    font-size: 40px\n}<\/span><\/pre>\n
::selection | Selects t<\/code>he highlighted (selected) area<\/h1>\n
This applies to any area that has been highlighted by the user.<\/p>\n
With the ::selection<\/code> pseudo-selector, we can apply our styling to the area that we highlight.<\/p>\n
div::selection {\n    background: yellow;\n}<\/span><\/pre>\n
:root | <\/code>Basic element<\/h1>\n
The :root<\/code> pseudo-class selects the root element of the document. In HTML, it is always the HTML element. In RSS, it is the RSS element.<\/p>\n
This pseudo selector is most used to store global rule values using CSS variable as it applies to the root element.<\/p>\n
:empty | <\/code>Applies only if the item is empty<\/h1>\n
This pseudo selector will select any element that has no children of any kind. The element must be empty. An element is empty if it has no whitespace, visible content, or descendant elements.<\/p>\n
div:empty {\n    border: 2px solid orange;\n}<\/span><div><\/div>\n<div><\/div>\n<div>\n<\/div><\/span><\/pre>\n
The rule will apply to empty div elements. The rule will be applied to the first and second div because they are truly empty, not the third div because it has whitespace.<\/p>\n
:only-child | <\/code>Selects an only child<\/h1>\n
This applies to an element that is the only child of its parent element.<\/p>\n
.innerDiv p:only-child {\n    color: orangered;\n}<\/span><\/pre>\n
:first-of-type | Selects the <\/code>first child element of a specified type<\/h1>\n
p:first-of-type {\n    color: orangered;\n}<\/span><\/pre>\n
This will select any paragraph which is the first paragraph inside another element, as if a class had been added to the paragraph itself.<\/p>\n
.innerDiv p:first-of-type {\n    color: orangered;\n}<\/span><\/pre>\n
This would apply to the first child of .innerDiv<\/code> of p<\/code> paragraph element.<\/p>\n
<div class=\"innerDiv\">\n    <div>Div1<\/div>\n    <p>These are the necessary steps<\/p>\n    <p>hiya<\/p>\n    \n    <p>\n        Do <em>not<\/em> push the brake at the same time as the accelerator.\n    <\/p>\n    <div>Div2<\/div>\n<\/div><\/span><\/pre>\n
The p ("These are the necessary step")<\/code> would be selected.<\/p>\n
:last-of-type | Selects the l<\/code>ast child element of a specified type<\/h1>\n
Same as :first-of-type<\/code>, but this will affect the last child element of the same type.<\/p>\n
.innerDiv p:last-of-type {\n    color: orangered;\n}<\/span><\/pre>\n
This would apply to the last child of innerDiv<\/code> of type p<\/code> paragraph element.<\/p>\n
<div class=\"innerDiv\">\n    <p>These are the necessary steps<\/p>\n    <p>hiya<\/p>\n    <div>Div1<\/div>\n    <p>\n        Do the same.\n    <\/p>\n    <div>Div2<\/div>\n<\/div><\/span><\/pre>\n
So, the p<\/code> element ("Do the same")<\/code> would be selected.<\/p>\n
:nth-of-type() | <\/code>Selects the child element of a specified type<\/h1>\n
This selector would select an element of a certain type from the list of the specified parent element.<\/p>\n
.innerDiv p:nth-of-type(1) {\n    color: orangered;\n}<\/span><\/pre>\n
:nth-last-of-type() | <\/code>Selects the child element of a type by the end of a list<\/h1>\n
This will select the last child element of a certain type.<\/p>\n
.innerDiv p:nth-last-of-type() {\n    color: orangered;\n}<\/span><\/pre>\n
This will select the last child element in the list contained in the innerDiv<\/code> element and of type, paragraph element.<\/p>\n
<div class=\"innerDiv\">\n    <p>These are the necessary steps<\/p>\n    <p>hiya<\/p>\n    <div>Div1<\/div>\n    <p>\n        Do the same.\n    <\/p>\n    <div>Div2<\/div>\n<\/div><\/span><\/pre>\n
The p Do the same<\/code> is the last paragraph child element inside the innerDiv<\/code> so it will be selected and affected by the CSS rule.<\/p>\n
:link | Selects an unvisited <\/code>hyperlink<\/h1>\n
This selector applies to links that have not been visited. This is mostly used with the a<\/code> anchor element with href attribute.<\/p>\n
a:link {\n    color: orangered;\n}<\/span><a href=\"\/login\">Login<a><\/span><\/pre>\n
This will make all a<\/code> anchor elements with a href attribute that has not been clicked to visit the page in its href attribute to have an orangered color text.<\/p>\n
:checked | <\/code>Selects a checked checkbox<\/h1>\n
This applies to checkbox that has been checked.<\/p>\n
input:checked {\n    border: 2px solid lightcoral;\n}<\/span><\/pre>\n
This rule applies to all checkboxes that have been clicked on to check it.<\/p>\n
:valid | Selects an <\/code>element that is valid<\/h1>\n
This is mostly used in forms to visualize form elements that pass validation set by the user. When a validation passes, the defaulting element is set with the valid<\/code> attribute.<\/p>\n
input:valid {\n    boder-color: lightsalmon;\n}<\/span><\/pre>\n
:invalid | Selects a<\/code>n element that is invalid<\/h1>\n
Same as :valid<\/code> but this will apply to elements that have failed the validation test.<\/p>\n
input[type=\"text\"]:invalid {\n    border-color: red;\n}<\/span><\/pre>\n
:lang() | Selects an element by a specified lang value<\/code><\/h1>\n
This applies to elements that have their language specified.<\/p>\n
It can be set in two ways either by this:<\/p>\n
p:lang(fr) {\n    background: yellow;\n}<\/span><\/pre>\n
or<\/p>\n
p[lang|=\"fr\"] {\n    background: yellow;\n}<\/span><p lang=\"fr\">Paragraph 1<\/p><\/span><\/pre>\n
:not() | <\/code>Negates the following selections (this is an operator)<\/h1>\n
A negation pseudo-selector selects what is not.<\/p>\n
Let\u2019s see an example:<\/p>\n
.innerDiv :not(p) {\n    color: lightcoral;\n}<\/span><div class=\"innerDiv\">\n    <p>Paragraph 1<\/p>\n    <p>Paragraph 2<\/p>\n    <div>Div 1<\/div>\n    <p>Paragraph 3<\/p>\n    <div>Div 2<\/div>\n<\/div><\/span><\/pre>\n
Div 1<\/code> and Div 2<\/code> will be selected because they are not p<\/code> elements.<\/p>\n
Conclusion<\/h1>\n
That\u2019s it. We exhausted the list. There are more pseudoselectors, but they are not standard so I left them out.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Useful CSS pseudo-classes that are often overlooked. Source: CSS Pseudo-Selectors You Might Have Missed – Bits and Pieces<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,127],"tags":[],"class_list":["post-7323","post","type-post","status-publish","format-link","hentry","category-documentations","category-html","post_format-post-format-link"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1U7","jetpack-related-posts":[{"id":13395,"url":"https:\/\/monodes.com\/predaelli\/2025\/05\/21\/drop-caps-css-tricks\/","url_meta":{"origin":7323,"position":0},"title":"Drop Caps | CSS-Tricks","author":"Paolo Redaelli","date":"2025-05-21","format":"link","excerpt":"Drop Caps | CSS-Tricks The CSS3 way (no extra markup) Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support. 
 Just a normal sentence. <\/p> p:first-child:first-letter { color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px;\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6373,"url":"https:\/\/monodes.com\/predaelli\/2020\/01\/01\/how-to-style-your-gtk-app-with-css-and-haskell-codeburst\/","url_meta":{"origin":7323,"position":1},"title":"How to Style Your GTK App with CSS and Haskell – codeburst","author":"Paolo Redaelli","date":"2020-01-01","format":"link","excerpt":"For the upcoming release of Gifcurry \u2014 an open-source, video-to-GIF maker \u2014 a completely custom theme was made using CSS and Haskell. The\u2026 Source: How to Style Your GTK App with CSS and Haskell - codeburst How to Style Your GTK App with CSS and Haskell Lettier Jun 28, 2018\u2026","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"Lettier","src":"https:\/\/i0.wp.com\/miro.medium.com\/fit\/c\/48\/48\/1%2ADM2bfIVj3LLgyG3hMirauw.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":8667,"url":"https:\/\/monodes.com\/predaelli\/2021\/09\/08\/useful-tools\/","url_meta":{"origin":7323,"position":2},"title":"Useful tools","author":"Paolo Redaelli","date":"2021-09-08","format":false,"excerpt":"htmlq, like jq, but for HTML. Uses CSS selectors to extract bits content from HTML files. Mozilla's MDN has a good reference for CSS selector syntax. jq is a lightweight and flexible command-line JSON processor.","rel":"","context":"In "Software Libero"","block_context":{"text":"Software Libero","link":"https:\/\/monodes.com\/predaelli\/category\/software\/software-libero\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9530,"url":"https:\/\/monodes.com\/predaelli\/2022\/08\/03\/how-to-create-printer-friendly-pages-with-css\/","url_meta":{"origin":7323,"position":3},"title":"How to Create Printer-friendly Pages with CSS","author":"Paolo Redaelli","date":"2022-08-03","format":"link","excerpt":"How to Create Printer-friendly Pages with CSS How to Create Printer-friendly Pages with CSS CSS Craig BucklerJanuary 5, 2020 Share This article was updated in 2020 to reflect latest best practices in CSS print styling. In this article, we review the art of creating printer-friendly web pages with CSS. \u201cWho\u2026","rel":"","context":"In "Web"","block_context":{"text":"Web","link":"https:\/\/monodes.com\/predaelli\/category\/web\/"},"img":{"alt_text":"Firefox print preview mode","src":"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":5369,"url":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","url_meta":{"origin":7323,"position":4},"title":"8 useful CSS tricks: Parallax images, sticky footers and more","author":"Paolo Redaelli","date":"2019-03-19","format":"link","excerpt":"8 useful CSS tricks: Parallax images, sticky footers and more This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too. Sticky Footer Zoom-on-Hover Images Instant Night Mode Custom Bullet Points Parallax Images Animation with Cropped Images\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10190,"url":"https:\/\/monodes.com\/predaelli\/2023\/01\/06\/a-collection-of-popular-layouts-and-patterns-made-with-css-css-layout\/","url_meta":{"origin":7323,"position":5},"title":"A collection of popular layouts and patterns made with CSS – CSS Layout","author":"Paolo Redaelli","date":"2023-01-06","format":false,"excerpt":"A collection of popular layouts and patterns made with CSS - CSS Layout","rel":"","context":"In "Web"","block_context":{"text":"Web","link":"https:\/\/monodes.com\/predaelli\/category\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/7323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=7323"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/7323\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=7323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=7323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=7323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}