Conditional CSS

Apply styles when an element is empty

To style an element that has no content inside, you can use the :empty pseudo-class.

Can I use

For example, you can hide an element if it is empty:

1.element:empty {
2    display: none;
3}
4

Spacing between elements

For flex and grid containers, you can use the gap property (or grid-gap in older grid implementations) to set spacing between items.

Unlike margins, gap:

• does not add space before the first or after the last item
• preserves spacing when items wrap (e.g., with flex-wrap: wrap)

You can also use:

• column-gap — spacing between columns
• row-gap — spacing between rows

Can I use

Apply styles based on the screen width

To do this, you can use media queries such as @media (min-width: 700px) for a mobile-first approach, or @media (max-width: 700px) for a desktop-first approach.

1.cards {
2  display: flex;
3  flex-direction: column;
4
5  @media (min-width: 700px) {
6    flex-direction: row;
7  }
8}
9
10//or
11
12.cards {
13  display: flex;
14  flex-direction: row;
15
16  @media (min-width: 700px) {
17    flex-direction: column;
18  }
19}
20

Media queries can also be combined. The following example specifies that the styles should be applied only when the screen width is between 500px and 1200px.

1@media (min-width: 500px) and (max-width: 1200px) {
2  /* … */
3}
4

Apply styles based on the container width (Container Queries)

To use Container Queries, you must first set container-type: inline-size; on the container element. Then, apply conditional styles to the elements inside the container using the @container rule.

1.cards {
2  container-type: inline-size;
3}
4
5@container (min-width: 400px) {
6  .card {
7    background-color: #F2E7DC;
8  }
9}
10

Example: Styling based on a CSS custom property (CSS variable).

1/* To apply styles when the CSS variable is set to `true`: */
2@container cards style(--featured: true) {
3  .card__inner {
4    color: red;
5  }
6}
7
8/* To apply styles when the variable is `false` or not defined: */
9@container cards not style(--featured: true) {
10  .card__inner {
11    color: black;
12  }
13}

Can I use

Apply styles based on browser support for CSS features

You can use the @supports rule to apply styles only if the browser supports a specific CSS feature or property. This allows you to progressively enhance your styles while maintaining compatibility with older browsers.

can i use

The :has selector

1. It allows you to apply styles depending on whether an element exists inside a container or not.

1.card:has(.icon) {
2  justify-content: space-around;
3}

2) Show an element depending on the selected value in a <select> element.

1form:has(option[value="other"]:checked) textarea {
2  display: block;
3}
4

3) Change the width of a block depending on the number of elements. For example, if the number of cards is greater than 5, reduce their size.

1.cards {
2  --item-size: 200px;
3  margin-top: 20px;
4  width: 100%;
5  display: grid;
6  grid-template-columns: repeat(auto-fill, var(--item-size));
7  gap: 20px;
8
9  &:has(.card:nth-last-child(n + 5)) {
10    --item-size: 100px;
11  }
12}
13

Can I use

Automatic space filling

The grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); property allows elements to automatically fill all available free space.

Can I use

Apply styles to an element when it is focused

The :focus-within pseudo-class can help with this.

Can I use

Below is an example of an input field that receives a shadow when it is focused.

Source https://ishadeed.com/article/conditional-css/