Селекторы подстановочных знаков (*, ^ и $) в CSS для классов

Опубликовано: 1 Марта, 2022

Селектор подстановочных знаков используется для одновременного выбора нескольких элементов. Он выбирает аналогичный тип имени или атрибута класса и использует свойство CSS. * подстановочный знак, также известный как содержащий подстановочный знак.

[attribute * = ”str”] Селектор: Селектор [attribute * = ”str”] используется для выбора тех элементов, значение атрибута которых содержит указанную подстроку str . В этом примере показано, как использовать подстановочный знак для выбора всех div с классом, содержащим str . Это может быть начало, конец или середина урока.
Синтаксис:

 [атрибут * = "значение"] {
    // свойство CSS
}

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>

Выход:

[attribute ^ = ”str”] Селектор: Селектор [attribute ^ = ”value”] используется для выбора тех элементов, значение атрибута которых начинается с указанного значения str . В этом примере показано, как использовать подстановочный знак для выбора всех div с классом, который начинается с str .

Синтаксис:

 [attribute ^ = "str"] {
    // свойство CSS
}

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>

Выход:

[attribute $ = ”str”] Селектор: Селектор [attribute $ = ”value”] используется для выбора тех элементов, значение атрибута которых заканчивается указанным значением str . В следующем примере выбираются все элементы со значением атрибута класса, заканчивающимся на str .

Синтаксис:

 [attribute $ = "str"] {
    // свойство CSS
}

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>                                 

Выход:

HTML CSS-Misc CSS

Селекторы подстановочных знаков (*, ^ и $) в CSS для классов

РЕКОМЕНДУЕМЫЕ СТАТЬИ