The [attribute^="value"] selector is used to select elements whose attribute value begins with a 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> |
WelcomeHello world! Are you learning CSS? |
Note: The value does not have to be a whole word.