Wildcard selectors
- The [attribute*= “value”] is a wildcard selector which is used for finding items whose attribute value includes the string which we have given here as the value.
- The [attribute=”value”] is a wildcard selector which is used for finding items whose attribute value starts with the string which we have given here as the value.
- The [attribute$=”value”] selector is a wildcard selector which is used for finding elements whose attribute value ends with the string which we have given here as the value.
Example 1
We are starting our code and performing these codes in Visual Studio Code. First, we open a new file. Then, we choose HTML as language and then put “!” and press “Enter”. All HTML basic tags appear here. So, we don’t need to add all these tags manually. We just put the “link” tag in the “head” in which we put the name of the CSS file. Inside the body, we put a heading and some div containers, and some paragraphs. All the divs and paragraphs contain different class names so we will use these names as the value in the wildcard selector for selecting the elements in CSS. Then, we will apply different styling to the selected elements.
We put the syntax of the wildcard selector [class * = “str”] which will select all the elements whose class name contains “str”. We pass “str” as the value of this wildcard selector. We are going to apply some properties so you will easily notice how it selects the elements and applies the style to all of them. We set “black” as the “background” for all the elements which contain “str” in their class names.
We are setting the text “color” to “white” because we have used black for the background. We also alter the size of the text by utilizing the “font-size” property and setting it to “18px”. We also align the text of the selected elements to the “center” utilizing the “font-family” property and set it to “Arial” font. The weight of the font of the selected elements is set to “bold”. We also provide the output of codes in this tutorial. See the output and check how it selects elements and applies all these properties to the selected elements.
The output shows that it selects all the elements whose class names contain “str” and the properties we have utilized in the CSS code are all applied to the selected elements.
Example 2
We again have multiple div classes and multiple paragraphs with different class names and a heading at the start. We will apply the wildcard selector in CSS and will select the elements from this HTML file and will alter the style of those selected elements.
We utilize the second syntax of the wildcard in this example which is [ class$ = “str”]. It will select all those elements whose class names end with the “str” string. We also apply the given styling properties which we are utilizing on the selected elements. We decorate the selected text using the “text-decorate” property and put “underline” for this property. We’ve changed the “color” of the text to “maroon”. We also utilize the “font-size” property and place “22px” as its value to change the text’s size. We also use the “font-family” attribute to set the font to “Times New Roman” and the “font-weight” of the selected element has been set to “bold.”
Here, you can see all those classes whose names end with the “str” string are selected and changed. All the properties which we have described in the CSS are applied here on those elements whose class names end at “str”. This is all because of the usage of the wildcard selector.
Example 3
This HTML file is the same as above. We just change the names of the classes of div and paragraph. We will use the third syntax of the wildcard selector in CSS for this code.
In this example, we are going to use the third syntax of the wildcard which is [ class^= “str”] and it will select all those elements whose class name starts with the string “str”. For all items with “str” at the start of the class names, we set “pink” as the “background”. We’ve changed the “color” of the text to “red”. We do use the “font-size” property and specify it to “22px” to change the text’s size. We also utilize the “font-family” attribute to define the type of font to “Calibri” and shift the text of the selected elements to the “center”. The font-style of the specific elements has been set here to “italic”.
In this screenshot, all those elements are styled whose class name starts with the “str” string. The wildcard selector selects all those elements and applies all properties to them. You can also see this in the output.
Example 4
We are going to change the previous HTML code a little bit. We are adding more div containers and adding more paragraphs in the previous HTML file and will apply all three wildcard selectors in the CSS code of this example.
In this code, we first apply some styling to the heading and alter the “font-family” to “Algerian”. We also set the heading in the “center” by utilizing the “text-align” property. The “text-decoration” property is here which we have settled as “underline”, so it will draw the underline for the heading. The “color” for this is set as “maroon”.
Then, we use the wildcard selector in which we placed “*” and “str” as the value. So, it will select all classes which contain “str” in their class name. We also use some properties which will apply to the selected elements. After setting the style properties for this wildcard selector, we are moving toward the next wildcard selector which is “[ class^= “par”]” it will select all elements in which the class names start with the string “par” and will apply these given properties on those elements.
Now, we are using the last wildcard selector here which we write as “[ class$= “div”]”. So, it will select those elements whose class name ends at the “div” string and also apply the given properties on all of them. All these wildcard selectors ignore the elements that don’t fulfill the condition of these wildcard selectors.
Look at this output, those elements which contain “str” in the class names are styled the same, those elements whose class name starts with “par” are styled the same, and those elements whose class name contains “div” at the end of the class name are the same. And those elements which don’t contain “str” in the class name and also their class names don’t start with “par” and don’t end at “div” string is not selected and appear simple here. No property is applied to them.
Conclusion
The goal of writing this tutorial is to guide you about the CSS wildcard selectors. We have explored the CSS wildcard selectors and have explained to you what wildcard selectors are, how to use these wildcard selectors, and how they work. We have discussed that the wildcard selectors are used for picking multiple elements at the same time and used to apply styling properties to those elements which we have picked using these wildcard selectors. We have also shown examples in which we have utilized those wildcard selectors and have provided the outputs of all examples in this tutorial.
