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:
<!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:
<!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:
<!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: