CSS


Back to Tags

attr

🗓️ March 23, 2021

There’s a neat little css function that lets you retrieve the value of an attribute of the selected element and use it in the stylesheet!

For example:

<h1 data-color="red">Hello</h1>
h1 {
  color: attr(data-color);
}

Would generate an h1 with red text!

Read more

overflow, position absolute, stop hiding

🗓️ February 23, 2021

So if you have an element positioned absolutely in a container and the container has overflow hidden the absolute element is gonna be hidden.

Need a structure of grandparent (relative position) > parent (overflow hidden) > child (position absolute)

Read more here

Collapsing Margins

🗓️ December 29, 2020

So today at work I noticed that I was not getting the spacing I expected from block level elements. The reason this was occuring was because my team and I were relying on margins for spacing out elements, but we should have been relying on padding instead.

Margins collapse in on each other (for siblings). If element A has a margin bottom and element b is its sibling and underneath and has a margin top, we would see the margin bottom of element A “collapse” (not be applied) and only see the margin top of element B.

Read more

Focusing in with focus-within

🗓️ January 16, 2020

The focus-within pseduo class represents an element that has received focus or contains an element that has received focus.

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}
Read more here