📦 Exercise Files

🔰 CSS Select and element's parent

For a long time, in CSS land, developers were longing for a feature that allowed to select the parent of a particular element.

In this example, we have two .parent elements but with different children. With the :has() pseudo selector, we can select the parent of a particular child. With this we can apply some styling only to that particular parent.

This opens up a lot of possibilities such as

✨ Style a list when a particular element is hovered
✨ Style a card depending on whether or not it has an image
✨ Style a header depending on whether or not it has an hyperlink

The possibilities are endless 🔥

Sometimes it happens so you don't have enough space to display a full piece of text. In some scenarios, if the UX allows, we could truncate the text using ellipsis, and here is the snippet for how to do it easily in CSS!

⚠️ Do note that, for this to work, a defined width is required for the text element. (Saved you some hassle in debugging 😁)