Wildcard Selectors (*, ^ and $) in CSS for classes

🔥 Quickfire # CSS

Ravi Baghel · 13 Oct 2022

Wildcard Selectors (*, ^ and $) in CSS for classes

In basic CSS learning, we learn about the various types of selectors available. Most of us are always using CSS to create queries and apply styles to HTML elements. But some of them are special for developing fields. Do you know about each and every one? If not, don't worry; here we introduce you to some useful wild selectors that you can use in your development.

Using CSS not only improves your designs and layouts, but you have to use it in the right way to achieve the desired results. Sometimes you realise that a good understanding of CSS foundations may have easily fixed the issue in website development. Hence, in this blog, we understand a some important attributes known as selectors.

How the Wildcard Selectors (*, ^ and $) Work in CSS

CSS allows the developer to arrange the designs and create visually appealing website elements and layouts. When developers use a selector, it is easy to select a proper element to design over code. With the help of selectors, developers can apply rules for applying styles to an element based on its attributes, class, or ID. However, there are times when developers need to apply styles to multiple elements at once or select elements with specific attribute values.

The wildcard selector (*) allowed developers to choose any element on a webpage, independent of type or attribute. This is important when applying a consistent style to all elements or making global modifications to a website.

On the other hand, the caret (^) and dollar sign ($) selectors are used to select elements based on their attribute values. The caret selector selects elements that have an attribute value starting with a specific string, while the dollar sign selector selects elements that have an attribute value ending on a specific string.

Using wildcard selectors carefully saves time and energy when styling multiple elements together. It improves website development efficiency by maintaining consistent design throughout the site.

attribute*=”txt”] Selector

The [attribute*=" txt"] selector selects elements whose attribute value contains the specified substring txt. In this example, you can use wildcardLooking to snatch up all those div elements with a specific class. Here's how to do it! with "txt." The class name can appear at the class name's beginning, end, or middle.

Syntax:

[attribute*="value"] {
   // CSS property
}

Example: Implementation of [attribute*=”txt”] Wildcard Selector

<!DOCTYPE html>
<html>
   <head>
       <style> 
           [class*="txt"] {  /* WE USE * HERE */
               background: green;
               color: white;
           }
           body {
               text-align:center;
               width:60%;
           }
       </style>
   </head>
   <body>
       <!-- Check Apply text -->
       <div class="first_txt">The first div element "txt" Apply.</div>
       <div class="second">The second div element not apply.</div>
       <div class="my-txtt">The third div element my-"txt"t Apply.</div>
       <p class="mytxt">Paragraph Text my"txt" Apply</p>
   </body>
</html>

Output

[attribute^=”txt”] Selector

The [attribute^=" txt"] Selector selects the elements whose attribute value contains the specified sub-string txt. In this example, you will learn how to fix all div elements with a class containing specific text, whether at the beginning, end, or middle of the text. The method involves using a wildcard.

Syntax:

[attribute^="str"] {
   // CSS property
}

Example: Implementation of [attribute^=”txt”] Wildcard Selector

<!DOCTYPE html>
<html>
   <head>
       <style> 
           [class^="txt"] { /*WE USE ^ HERE */
               background: green;
               color: white;
           }
           body {
               text-align:center;
               width:60%;
           }
       </style>
   </head>
   <body>
       <!-- Check Apply text -->
       <div class="txtfirst">"txt"first Apply The first div element.</div>
       <div class="txtsecond">"txt"second apply The second div element.</div>
       <div class="txt-start">"txt"-start apply The third div element.</div>
       <div class="end-txt">Not apply The fourth div element.</div>
       <p class="my">Paragraph Text</p>
   </body>
</html>

Output

[attribute$=”txt”] Selector

The [attribute$=" value"] selector selects elements whose attribute value ends with a specified value txt. The following example selects all ingredients with a class attribute value that ends with txt.

Syntax:

[attribute$="str"] {
   // CSS property
}

Example: Implementation of [attribute$=”txt”] Wildcard Selector

<!DOCTYPE html>
<html>
   <head>
       <style> 
           [class$="txt"] { /* WE USE $ HERE */
               background: green;
               color: white;
           }
           body {
               text-align:center;
               width:60%;
           }
       </style>
   </head>
   <body>
       <!-- Check Apply text -->
       <div class="firsttxt">first"txt" apply The first div element.</div>
       <div class="stsecondtxt">stsecond"txt" apply The second div element.</div>
       <div class="txat">Not apply The third div element.</div>
       <p class="mytxt">my"txt" apply This is some text in a paragraph.</p>
   </body>
</html>

Output

Essence

Hope this guide helps you understand how wildcard selectors work in CSS. With the proper example of each, you are aware of how to apply this selector in development to target specific elements. Remember to use wildcard selectors sparingly and only when necessary, as they can potentially affect multiple elements on a webpage.

If you want to your website stand out from the competition, Elightwalk is ready to help you with your e-commerce project. Our developers are aware of sharp design techniques and tricks to make your project unique in quality. Contact us today to discuss your e-commerce development needs or to hire our team for your next business project and experience the excellence that sets us apart.

Table of contents

Ravi Baghel

Frontend Developer

A professional frontend developer with 5 years of experience who excels in tackling complex challenges. Their expertise focuses on creating SEO- and mobile-friendly products that fit customer needs. He works closely with fellow front-end engineers, helping to adopt best practices and stay abreast of new technologies.

Most Visited Blog

The Essential Guide to Animating SVGs with CSS

Unleash SVG's creative potential! Dive into our essential guide on animating SVGs with CSS and learn how to create dynamic and engaging visual elements for your web projects.

Simple Steps to Modify Your Cursor Colour

Elevate your web design with a pop of colour! Follow these easy instructions to change the colour of cursor easily and add a personalized touch to improve the visual appeal of your website.

SVG - Scalable Vector Graphics

Unleash the power of SVG! Explore the versatility and benefits of this scalable and responsive picture format with this quick explanation of Scalable Vector Graphics.