Marusya's School Notes

CSS [Attribute|="Value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. The following example selects all elements with a class attribute value that begins with "top":

HTML file:	Displayed by browser:
<style> [class\|="top"] { background: yellow; } </style> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="topcontent">Are you learning CSS?</p> </body>	Welcome Hello world! Are you learning CSS?

HTML file:

Displayed by browser:

<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>

Hello world!

Are you learning CSS?

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen (-), like class="top-text".