Day 59: naming containers

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

When you add a container query, it will look for the nearest ancestor container, by default. If you have multiple nested containers or if you just want to make sure that your query uses the right container, you can name containers and query them specifically.

Let's say, we have 2 size containers, .wrapper and <section>.

<div class="wrapper">
  <section>
    <h2>Latest news</h2>

    <div class="card">
      <h2>Hey, I'm a card!</h2>
    </div>
  </section>
</div>

/* That's our outer size container. */
.wrapper {
  container-type: inline-size;
}

/* That's our inner size container. */
section {
  width: 50%;
  container-type: inline-size;
}

/* Default styles for the card. */
.card {
  background-color: yellow;
  border: 5px solid;
}

/* Container query */
@container (min-width: 500px) {
  .card {
    background-color: hotpink;
  }
}

By default, the container query watches the width of the closest size container, <section>. You can grab and resize the <section> by clicking and dragging it in the bottom right corner. The background color of the .card changes as soon as the width of the parent section hits 500px.

By naming the container and using that name in the query, you can target a specific container.

/* That's our outer size container. */
.wrapper {
  container-type: inline-size;
  container-name: wrapper;
}

/* That's our inner size container. */
section {
  container-type: inline-size;
}

/* The query watches the width of the outer size container (.wrapper) */
@container wrapper (min-width: 500px) {
  .card {
    background-color: hotpink;
  }
}

You can grab and resize the .wrapper by clicking and dragging it in the bottom right corner. The background color of the .card changes as soon as the width of the .wrapper is lower than 500px.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-12-15T00:00:00+00:00) Day 59: naming containers. Retrieved from https://www.scien.cx/2022/12/15/day-59-naming-containers/

MLA

" » Day 59: naming containers." Manuel Matuzović | Sciencx - Thursday December 15, 2022, https://www.scien.cx/2022/12/15/day-59-naming-containers/

HARVARD

Manuel Matuzović | Sciencx Thursday December 15, 2022 » Day 59: naming containers., viewed ,<https://www.scien.cx/2022/12/15/day-59-naming-containers/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 59: naming containers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/15/day-59-naming-containers/

CHICAGO

" » Day 59: naming containers." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/15/day-59-naming-containers/

IEEE

" » Day 59: naming containers." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/15/day-59-naming-containers/. [Accessed: ]

rf:citation

» Day 59: naming containers | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/15/day-59-naming-containers/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.