Wildcard Selectors (*, ^ and $) in CSS for classes
Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard. [attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select that elements whose attribute value contains the specified sub string str. This example shows how to use a wildcard to select all div with a class that contains str. This could be at the start, the end or in the middle of the class.
Syntax:
[attribute*="value"] {
// CSS property
}
Example:
html
<!DOCTYPE html><html> <head> <style> /* Define styles of selected items, h1 and rest of the body */ [class*="str"] { /* WE USE * HERE */ background: green; color: white; } h1 { color:green; } body { text-align:center; width:60%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <!-- Since we have used * with str, all items with str in them are selected --> <div class="first_str">The first div element.</div> <div class="second">The second div element.</div> <div class="my-strt">The third div element.</div> <p class="mystr">Paragraph Text</p> </body></html> |
Output:
[attribute^=”str”] Selector: The [attribute^=”value”] selector is used to select those elements whose attribute value begins with a specified value str. This example shows how to use a wildcard to select all div with a class that starts with str.
Syntax:
[attribute^="str"] {
// CSS property
}
Example:
html
<!DOCTYPE html><html> <head> <style> [class^="str"] { /*WE USE ^ HERE */ background: green; color: white; } h1 { color:green; } body { text-align:center; width:60%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <!-- All items beginning with str are highlighted --> <div class="strfirst">The first div element.</div> <div class="strsecond">The second div element.</div> <div class="str-start">The third div element.</div> <div class="end-str">The fourth div element.</div> <p class="my">Paragraph Text</p> </body></html> |
Output:
[attribute$=”str”] Selector: The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value str. The following example selects all elements with a class attribute value that ends with str.
Syntax:
[attribute$="str"] {
// CSS property
}
Example:
html
<!DOCTYPE html><html> <head> <style> [class$="str"] { /* WE USE $ HERE */ background: green; color: white; } h1 { color:green; } body { text-align:center; width:60%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <!-- All items ending with str are highlighted --> <div class="firststr">The first div element.</div> <div class="stsecondstr">The second div element.</div> <div class="start">The third div element.</div> <p class="mystr">This is some text in a paragraph.</p> </body></html> |
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Please Login to comment...