Tipos de selectores de CSS

Los selectores apuntan al elemento HTML al que desea establecer el estilo. El selector es la técnica para darle cualquier tipo de estilo a tu texto en tu página HTML. Hay 4 tipos de selectores CSS utilizados en HTML para señalar el elemento.

1. Selector universal
2.Selector de tipo de elemento
3. Selector de identificación
4. Selector de clase

Veamos todos los diferentes tipos de selectores disponibles, con una breve descripción de cada tipo de selectores CSS. aquí.

selector universal

El selector universal funciona como un carácter comodín, seleccionando todos los elementos de una página. Cada página HTML se basa en contenido colocado dentro de etiquetas HTML. Mire el siguiente ejemplo de CSS, que usa el selector universal.

* {
   color: white;
   font-size: 12px;
}

Selector de tipo de elemento

Este selector debe coincidir con al menos uno o más elementos HTML del mismo tipo. Por lo tanto, un selector de nav coincidiría con todos los elementos HTML, y un selector de coincidiría con todas las listas desordenadas de HTML, o elementos

    , o

    . Mira el siguiente ejemplo de CSS.

    ul {
       list-style: none;
       border: solid 1px #CCC;
    }
    
    p {
       color: gray;
       font-size: 16px;
    }
    

    Este selector de elementos CSS utiliza un elemento HTML como

    <ul>
      <li>one</li>
      <li>Two</li>
      <li>Three</li>
      <li>Foure</li>
    </ul>
    
    <p>Example paragraph text.</p>
    

    Selector de identificación

    Este selector se declara mediante un símbolo de almohadilla o almohadilla (#) que precede a una cadena de caracteres. La cadena de caracteres la define el desarrollador.

    Este selector coincide con cualquier elemento HTML que tenga un atributo ID con el mismo valor que el del selector. Mire el siguiente ejemplo de CSS, que usa el selector de ID.

    #main{
       width: 90%;
       margin: 0px;
       color: gray;
       font-size: 16px;
    }
    

    Este selector de ID CSS utiliza un elemento HTML como:

    <div id="main">Hello World!</div>
    

    Selector de clase

    El selector de clase es el más útil de todos los selectores de CSS. Se declara con un punto que precede a una cadena de uno o más caracteres. Al igual que en el caso de un selector de ID, el desarrollador define esta cadena de caracteres.

    Mire el siguiente ejemplo de CSS, que usa el selector de clase:

    .main{
       width: 90%;
       margin: 0px;
       color: gray;
       font-size: 16px;
    }
    

    Este CSS de selector de clase utiliza un elemento HTML como:

    <div class="main">Hello World!</div>
    

    Conclusión

    En conclusión, quiero decir que estos tipos de selectores de CSS son utilizados mayoritariamente y con regularidad por todos los diseñadores de sitios web, así como por los desarrolladores. Por lo tanto, debe usar todos estos donde desee en su diseño del sitio web. Puedes ver más Selectores de CSS desde aquí.

Similar Posts

Leave a Reply

Your email address will not be published.