Skip to content

How to style a dropdown using CSS?

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

Last Updated : 24 Jan, 2024

Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing “class” anywhere, .class^ selects those starting with “class,” and .class$ selects those ending with “class.” These selectors provide flexibility when styling elements with similar attributes.

Table of Content

Syntax:

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

Contains (*=) wildcard selector

The (*=) wildcard selector is used with attribute selectors to target elements with an attribute that contains a specific substring.

Syntax:

[class*="string"] {
   // CSS property
}

Example: Implementation of (*=) wildcard selector.

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        /* Apply styles to elements with a class containing "str" */
        [class*="str"] {
            background: green;
            color: white;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
            width: 60%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <!-- The first div with a class containing "str" -->
    <div class="first-string">The first div element.</div>
 
    <!-- The second div with a class not containing "str" -->
    <div class="second-div">The second div element.</div>
 
    <!-- The third div with a class containing "strt" -->
    <div class="my-start">The third div element.</div>
 
    <!-- A paragraph with a class containing "str" -->
    <p class="my-string">Paragraph Text</p>
</body>
 
</html>
 
  

Output:

Screenshot-2024-01-17-152221

Starts with (^=) wildcard selector

The `(^=)` wildcard selector in CSS targets elements whose attribute value begins with a specific string, applying styles accordingly.

Syntax:

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

Example: Implementation of (^=) wildcard selector.

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        [class^="str"] {
            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:

Ends with ($=) wildcard selector

The ‘($=)’ wildcard selector in CSS targets elements whose attribute value ends with a specific string, allowing for styling based on this condition.

Syntax:

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

Example: Implementation of ($=) wildcard selector.

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        [class$="str"] {
            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.

How to style a dropdown using CSS?

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

Building Tooltip using CSS

A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip. Tooltip PositionsTooltips can be pos

How to Set Background Color Opacity without Affecting Text in CSS?

Here are two approaches to set a background color with opacity in CSS without affecting the text. 1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can

Transition shorthand with multiple properties in CSS?

The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to

How to prevent line breaks in the list of items using CSS?

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element

How to remove the space between inline-block elements?

To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin

6 Best CSS frameworks You should Know to design Attractive Websites

If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz

Space between two rows in a table using CSS

The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp

What is the difference between display: inline and display: inline-block in CSS?

The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w

How to Write a:hover in Inline CSS?

The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff

How to place two div side-by-side of the same height using CSS?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which