CSS | Selector de atributos

El selector de atributos CSS se utiliza para seleccionar un elemento con algún atributo o valor de atributo específico. Es una excelente manera de diseñar los elementos HTML agrupándolos en función de algunos atributos específicos y el selector de atributos seleccionará aquellos elementos con atributos similares.
Hay varios tipos de selectores de atributos que se analizan a continuación:

  • Selector [atributo]: este tipo de selector de atributo se utiliza para seleccionar todos los elementos que tienen el atributo especificado y aplica la propiedad CSS a ese atributo. Por ejemplo, el selector [clase] seleccionará todos los elementos con el atributo de estilo.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attributes selector</title>
            <style>
                [class] {
                    text-align:center;
                    Color:green;
                }
                .gfg {
                    font-size:40px;
                    font-weight:bold;
                    margin-bottom:-20px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <p class = "geeks">A computer science portal for geeks</p>
        </body>
    </html>                    

    Producción:
    attribute selector

    Este selector se usa para restringir algunos elementos particulares, luego necesita especificar ese elemento antes que el selector de atributos.
    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                div[style] {
                    text-align:center;
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    margin-bottom:-20px;
                }
                p {
                    text-align:center;
                    font-size:17px;
                }
            </style>
        </head>
        <body>
            <div style = "color:green">GeeksforGeeks</div>
            <p>A computer science portal for geeks</p>
        </body>
    </html>                    

    Producción:
    attribute selector

    Se pueden seleccionar varios elementos usando el operador de coma

    h2, p[style] {
        background-color: #00b93e;
    }
  • [atributo = “valor”] Selector: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene el valor exactamente igual al valor especificado.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [title = "gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [title = "geeks"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div title = "gfg">GeeksforGeeks</div>
            <p title = "geeks">A computer science portal for geeks</p>
        </body>
    </html>                    

    Producción:
    attribute selector

  • Selector [atributo~=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo es una lista de valores separados por espacios, uno de los cuales es exactamente igual al valor especificado.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [class~="gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [class~="geeks"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <div Class = "geeks">A computer science portal for geeks
            </div>
            <div class = "geeks ide">GeeksforGeeks is coding platform
            </div>
        </body>
    </html>                    

    Producción:
    attribute selector

  • Selector [atributo|=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene una lista de valores separados por guiones que comienzan con el valor especificado. El valor tiene que ser una palabra completa sola o seguida de un guión.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [class|="gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [class|="geeks"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <div Class = "geeks-ide">A computer science portal for geeks
            </div>
            <div class = "geeks-ide1">GeeksforGeeks is coding platform
            </div>
        </body>
    </html>                                    

    Producción:
    attribute selector

  • Selector [attribute^=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo comienza con el valor especificado. El valor no necesita ser una palabra completa.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [class^="gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [class^="geeks"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <div Class = "geeks">A computer science portal for geeks
            </div>
            <div class = "geekside">GeeksforGeeks is coding platform
            </div>
        </body>
    </html>                                    

    Producción:
    attribute selector

  • Selector [attribute$=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo termina con el valor especificado. El valor no necesita ser una palabra completa.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [class$="gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [class$="geeks"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <div Class = "geeksforgeeks">A computer science portal for geeks
            </div>
            <div class = "geeks">GeeksforGeeks is coding platform
            </div>
        </body>
    </html>                                    

    Producción:
    attribute selector

  • Selector [atributo*=”valor”]: Este selector selecciona todos los elementos cuyo valor de atributo contiene el valor especificado presente en cualquier lugar. El valor no necesita ser una palabra completa.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Attribute selector</title>
            <style>
                [class*="gfg"] {
                    color:green;
                    font-size:40px;
                    font-weight:bold;
                    text-align:center;
                }
                [class*="for"] {
                    font-size:17px;
                    text-align:center;
                    margin-top:0px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</div>
            <div Class = "geeksforgeeks">A computer science portal for geeks
            </div>
            <div class = "geeks for">GeeksforGeeks is coding platform
            </div>
        </body>
    </html>                                    

    Producción:
    attribute selector

Publicación traducida automáticamente

Artículo escrito por prakhar7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *