Pseudo-what in CSS

• Pseudo-elements
• Pseudo-classes
• Functional pseudo-classes

• Pseudo-elements
• Pseudo-classes
• Functional pseudo-classes

Pseudo-elements

It is a keyword added to a selector that lets you style a specific part of the selected element(s).

            
h1::first-letter,
h1::first-line,
h1::after,
h1::before {}
            
        

Pseudo-elements should be used with :: notation, but it is not so clear

::after/::before

Swiss knife for any troubles

• They brings you opportunity to feel all power of content property.
• Additional elements without a symbol in HTML

⚠️ They are not visible for accesability tree. Hard to manipulate from JS.

Some Javascript

What can you do with pseudo element ::after from JS?

Not much

Pseudo-elements are not part of the DOM, so you can just play around with Styles and CSS

        
1. window.getComputedStyle(HTMLElement, pseudoElement)
2. Element.pseudo('type') // method under discussion
        
      

        
<style>.demo {}</style>
<div class="demo"></div>

<script>
  const demo = document.querySelector('.demo')

  // what is result
  window.getComputedStyle(demo, ':after')?.content 
</script>
        
      

'none'

::first-letter/::first-line

"F,irst letter of this line.

And first line of the content we can write here with some span.

⚠️ Works only for block elements with inline children, and have reduced list of allowed properties

::placeholder

⚠️ There is no clear answer how placeholder should look like when it comes to contrast questions.

::marker

• list item 1
• list item 2

⚠️ Very reduced list of CSS properties to edit. No margins and paddings, but you can animate :)

::file-selector-button

::backdrop

It helps you to decorate background of dialog and elements that are open on fullscreen

Open dialog

::selection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit mi ut faucibus luctus. Cras sed nibh sapien. Maecenas aliquam turpis a est euismod, nec fringilla enim ultrices. Etiam ut augue porttitor, venenatis metus sit amet, efficitur dolor. Donec ut turpis massa. Duis eu neque tempor, venenatis lacus non, lobortis tellus.

::target-text

https://www.dnb.no/lan#:~:text=Hva%20vil%20boligl%C3%A5net%20koste%20deg%3F

::grammar-error / ::spelling-error

What we can do with styling

• color
• background-color
• cursor
• caret-color
• text-decoration and its associated properties
• text-shadow
• stroke-color, fill-color, and stroke-width

What we can do with styling

• color
• background-color
• cursor
• caret-color
• text-decoration and its associated properties
• text-shadow
• stroke-color, fill-color, and stroke-width

Cascading with selection

Why important to use :root :)

Next: Highlight API

::highlight(custom-highlight-name){ }

        
const r = new Range();
r.setStart(document.body, 0);
r.setEnd(document.body, 2);

CSS.highlights.set("custom-highlight-name", new Highlight(r));
        
      

Next: Highlight API

• Meet the CSS highlight pseudos
• Chromium spelling and grammar features