How to style elements with a specific attribute

Using the CSS [attribute|="value"] Selector

    /* Make background pink for any element with the 'top' class */

        [class|=top] { background: hotpink;}

Using the top-header class/

Using the top-text class

Using the topcontent class

Using the top class

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. In this example, the word is 'flower'

Mothers Day is coming