---
title: "CSS snippets"
description: "In CSS, the order of pseudo-classes matters. It should be as follows:"
canonical_url: "https://codex.republic.se/languages/css/css-snippets"
section: "Pages"
---

# CSS snippets

---

## Pseudo classes

In CSS, the order of pseudo-classes matters. It should be as follows:

```css
a:visited { 
    color: pink;
}

a:focus {
    outline: 1px dotted solid;
}

a:hover {
    background: grey;
}

a:active {
    background: darkgrey;
}

```

Summary:

- `:visited` is the state when a link has been clicked. When a user revisits a web page, that link should have a different state, so that the user can tell they've visited it.
- `:focus` is the state that shows up when the user navigates the page by keyboard. A button or link should take a style that clearly indicates it is in focus.
- `:focus-visible` can be used instead of `:focus` if you do not want the focus style to be triggered by mouse clicks.
- `:hover` is the state when an element is hovered over by the mouse.
- `:active` is the state when an element is being pressed from a click by the mouse.

## Box sizing

```css
html {
    box-sizing: border-box;
}
*, 
*:before, 
*:after { 
    box-sizing: inherit;
}

```

## Visually hidden

```css
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
    white-space: nowrap; /* added line */
}

```

## Disable animation for users who opt out

```css
.element {
    animation: pulse 1s linear infinite both;
}
@media (prefers-reduced-motion: reduce) { 
    .element {
        animation: none;
    }
}

```

## Images

Remove margin under images and make them block-level elements by default.

```css
img {
    display: block; 
    width: auto; 
    max-width: 100%;
}

```

## Margin collapse

This is one of the most common issues with margins.

You have two elements aligned vertically, the one above with `margin-bottom` and the one below with `margin-top`.

The **greater of the two values will be used** as the margin between the elements, and the other will be ignored by the browser.

This also means that a box with both margin top and bottom will collapse with adjacent elements when they are stacked vertically.

```text
1em
+-----------------------+
|                       |
+-----------------------+
1em

```

will render like this when stacked:

```text
1em
+-----------------------+
|                       |
+-----------------------+
1em
+-----------------------+
|                       |
+-----------------------+
1em

```

## Stacking order and pseudo-elements

In HTML, an element that sits at the bottom of a container will be positioned above the preceding elements.

```html
<div class="home">
    <!-- ::before element --> 
    <div class="floor"></div> 
    <div class="desk"></div> 
    <div class="laptop"></div> 
    <!-- ::after element -->
</div>

```

Pseudo-elements are inline by default and need a content property:

```css
.element::before { 
    content: "";
    display: block;
    background: #ccc;
    width: 100px;
    height: 100px; /* width and height needs a block element */
}

```

## Transitions

You can't transition from height 0 to auto. Rather you can transition the max-height value instead since it will stop at the real height of the content. Make sure the max-height value is larger than the content height

```css
.element { 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out; 
}
.element:hover { 
    max-height: 300px;
}

```

... and visibility

```css
.menu { 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; 
}
.menu-wrapper:hover .menu { 
    opacity: 1;
    visibility: visible;
}

```

## Remove hover effect on touch screens

Sometimes we might need to hide the hover effects on touch screens so they don't trigger when the user scrolls the page. Especially for large hover effects on things like cards and similar.

```css
@media (hover: hover) { 
    .element:hover {
        color: #222; 
    }
}

```

## Flexbox

Make flexbox children the same width without setting a fixed width:

```css
.item { 
    flex-grow: 1;
    flex-basis: 0%;
}

```

Flex-basis set to 0% makes the width calculations disregard the content width for each item and makes all items the same size.