CSS :has(): container style according to content

Useful to know

:has() allows selection of an element according to other elements described with a relative selector. For example, .card:has(img) selects a card that contains an image. Thus, the container can be given a different style according to its contents, with no additional class just for this case. [1]

The difference between .card:has(img) and .card:has(> img) is substantial. The first example allows an image inside the tree, and the second looks for a direct child element. If the style is triggered unexpectedly, check this exact connection.

Use the terms specifically enough. A rule on too wide a set of elements is more difficult to understand and maintain . :has() is a means of CSS selection, not a business data validator: the presence of a field in the document does not prove that its value is correct or that the server has accepted the form.