Today I Learned

Capitalize only the first word of a text

If you need to capitalize only the first word of a sentence use the first-letter property for that.

.your_class_name::first-letter{
  text-transform: capitalize;
}

This was useful to me to capitalize data from an API and can't handle it on the base app.

pointer-events

CSS

The pointer-events CSS property is used to control under what circumstances an element can trigger user interface events like mouse clicks and hover. It allows you to control the visibility and interaction of elements on the page.

The pointer-events property can take the following values:

auto: The element behaves as normal. It is subject to mouse events according to its CSS styling.
none: The element is completely transparent to mouse events. It will not block any interactions with elements beneath it, effectively making it "click-through."

This property is beneficial when you want to overlay an element on top of another but still want the underlying element to receive mouse events. It provides a way to flexibly control layered elements' interaction behavior.

:not selector

CSS

The :not pseudo selector is useful for styling a group of elements while leaving the last (or specified) element unstyled.

HTML

One
Two
Three
Four

CSS

.css-not-selector-shortcut { 
 display: flex; 
}

ul { 
 padding-left: 0; 
}

li { 
 list-style-type: none; 
 margin: 0; 
 padding: 0 0.75rem; 
}

li:not(:last-child) { 
 border-right: 2px solid #d2d5e4; 
}