Selectores de atributo

Tipos de Selectores en CSS3 (Examen teórico)

Repasando los tipos de selectores en css, estos pueden ser:
  1. *: todo el documento
  2. Selectores de tipo o de etiquetas HTML: como p { ... }, img { ... }, etc
  3. IDs: Comienzan con # seguidos del nombre de un id y van asociados al atributo id de una etiqueta.
    Ejemplo #seccion1 { ... }
  4. Selectores de Clase: Comienzan con un . seguidos del nombre de una clase y están asociados al atributo class de una etiqueta.
    Ejemplo .principal { ... }
  5. Selectores de Dependencia Directa (combinadores): Aplica la regla a aquel selector más a la derecha de una cadena de selectores que conforman los ancestros del mismo.
    Ejemplo div > p > em { ... }
  6. Pseudoclases: La regla se forma colocando el elemento seguido de : y el nombre de la pseudoclase. Las pseudoclases modifican la apariencia de un elemento según su estado. Ejemplo: a:hover { ... }
  7. Pseudoelementos: La regla se forma colocando el elemento seguido de :: y el nombre del pseudoelemento. Los pseudoelementos modifican la apariencia de parte de un elemento(1) o crean contenido adicional(2) dentro de ese elemento.
    Ejemplo: p::first-line { ... }1, p::after { ... }2
  8. Selectores de atributo: Cambia la apariencia de los elementos en función de la presencia de un atributo determinado o el valor del atributo en sí.
    Ejemplos: img[title]{ ... } (imágenes con el atributo title), a[target="_blank"]{ ... }: (enlaces con el atributo target igual a blank).
    Para indicar los valores de los atributos, de ser el caso se cuenta con varios operadores:
    • =  igual ( a[target="_blank"]{ ... } ): enlaces externos.
    • *= contiene ( p[title*="ejemplo"]{ ... } ): párrafos con atributo title que contienen el texto ejemplo.
    • ^= comienzan por ( a[href^="#"]{ ... } ): enlaces internos.
    • $= terminan por ( a[href$=".org"]{ ... } ): : enlaces a sitios web que terminen en .org.
    • Más...

En caso de combinar pseudoclases con pseudoelementos o selectores de atributo con pseudoelementos, las pseudoclases ( :hover, :nth-child, etc.) se colocan antes de los pseudoelementos de la siguiente manera: selector:pseudoclase::pseudoelemento { ... }.

Asimismo con los selectores de atributo que se colocan antes de los pseudoelementos selector[atributo]::pseudoelemento { ... }.

Se puede aplicar un mismo conjunto de reglas a más de un selector separándolos por comas.
Ejemplo: td, th {border: 1px dotted gray; background-color: whitesmoke; color: darkblue;}

Ejercicio con selectores de atributo

Copia el texto del primer desplegable en una nueva página web. Crea un archivo css, enlazalo e incluye en el mismo, los selectores de atributo correspondientes para mostrar la web como la de la siguiente página:

Texto del Ejercicio

Software para Desarrollo Web

El software de desarrollo web permite crear aplicaciones web: desde sitios estáticos hasta aplicaciones dinámicas.


Niveles de Desarrollo Web

Nivel I. Diseño de Webs Estáticas

HTML, CSS, JavaScript Básico: Los pilares básicos para el desarrollo de páginas web

Visual Studio Code (VS Code): Editor de código abierto desarrollado por Microsoft.

GitHub: Plataforma de código abierto para compartir y colaborar en proyectos

Bootstrap: Framework para CSS que ayuda a construir interfaces de usuario interactivas

Chrome Dev Tools: Herramienta para desarrolladores de navegadores

Nivel II. Web reactivas y desarrollo de Webs Dinámicas

Servidor local: XAMPP, Laragon

JavaScript Intermedio

Framework para JavaScript (1): React, Angular, Vue, Svelte: Permiten construir interfaces de usuario reactivas.

Una de las siguientes Bases de Datos: MySQL, SQLite, Microsoft SQLServer

Un lenguaje de BackEnd: PHP, Python, TypeScript y NodeJS

Nivel III. Programación Avanzada de Webs: Frameworks, Gestores de Dependencia, MVC y POO

JavaScript Avanzado

POO en Lenguaje de BackEnd: (PHP, Python o JavaScript | NodeJS)

Framework para Lenguaje de BackEnd. Laravel (PHP), django (Python), Express.js (Node)

Gestores de Dependencias para Lenguaje de BackEnd. Composer (PHP), Miniconda (Python), NPM (Node)

Patrones de Diseño: MVC

ORM (Object Relational Mapping) para Base de Datos seleccionada.

Dentro de la oferta formativa de GRI incluimos éstos cursos.

Puedes apuntarte en el siguiente número de teléfono 931 998 205 o escribiendo un correo a administracion.bcn@e-gri.com.


Herramientas de Apoyo al Desarrollo Web

Tipos de letra e iconos (Google Fonts)

Iconos (Font Awesome)

Emojis y símbolos (Get Emoji)

Generador de iconos (Softicons)

Imagenes gratuitas (Freepik)

Videos e imagenes gratuitos (Pexels)

Música de fondo gratuita (FiftySounds)

Desarrollo del Ejercicio

🔸Asigna las etiquetas apropiadas a cada elemento. (Tienes 3 niveles de título: h1, h2 y h3)

🔸Crea tres botones que servirán de enlaces internos a los 3 diferentes niveles de Desarrollo Web. Mételos dentro de una caja tipo nav y dale las reglas css apropiadas para que se muestren como en el ejercicio. Recuerda que los botones, tienen programada la pseudoclase button:hover {...}

Copia las siguienes reglas para cambiar la viñeta del ul


    ul {
      list-style-type: none;  /* Oculta las viñetas estándar */
    }
    
    ul li::before {
      content: "★ ";         /* Reemplaza la viñeta con un símbolo */
      color: #f4a261;
      font-size: 18px;
      font-weight: bold;
      margin-right: 8px;
    }
    
    ul li:hover::before {
        color: #2a9d8f;      /* Nuevo color cuando se pasa el ratón */
    }

🔸Crea las reglas de CSS pertinentes para los títulos.

🔸Crea una clase para el párrafo donde están los teléfonos y el mail del GRI y aplícalos.

🔸Para mostrar los iconos a la derecha/izquierda de los enlaces, deberás crear una regla css que utiliza tanto atributos como pseudoelementos. A continuación un ejemplo con el tipo de enlace que tiene al principio de href la palabra mail.


    a[href^="mailto"]::after {
      content: url('../img/mail.svg'); /* Icono de correo */
    }

🔸Termina de crear las reglas para el resto de los enlaces, guiandote por los ejemplos de éste documento