Los selectores E.e y E#e

(E), la propiedad tiene un efecto sobre todos los elementos E. En el ejemplo, todos los elementos <p> serán de color rojo.

(E.e), la propiedad E afecta a los elementos de la clase.

Si queremos crear un solo elemento de a. (E # e), debemos usar donde el valor de e es.

Ten cuidado! ¡Los valores de ID no pueden repetirse en todo el documento!

Opciones universales: * ,. y #

(*) El símbolo afectará a todos los elementos o etiquetas de la página.

Para influir en todos los elementos de página que tienen un valor de clase específico

También se podría utilizar el selector *.clase

Para definir un id que afecte a cualquier etiqueta, se debe escribir una almohadilla y el nombre del id. En el ejemplo siguiente, el elemento de id "aviso" se verá de color rojo.

Hay que tener en cuenta que el atributo id no se puede repetir, es decir, que no puede haber en una página web dos elementos con el mismo valor del atributo id (independientemente de que los elementos tengan etiquetas iguales o distintas). Pero una misma hoja de estilo se puede llamar desde varias páginas web y en cada una de esas páginas puede haber elementos distintos con el mismo atributo id.

Selectores de descendientes: E F

Si se escriben dos etiquetas seguidas (E F), las propiedades afectan a los elementos con la segunda etiqueta (F) contenidos dentro de la primera etiqueta (E), aunque haya etiquetas intermedias. En el ejemplo siguiente, todos los párrafos <p> dentro de una división <div> se ven de color rojo.

En general, si se escriben varias etiquetas seguidas (E F G ... ), las propiedades afectan a los elementos con la última etiqueta contenidos dentro de la etiqueta anterior, contenidos a su vez dentro de etiqueta anterior y así sucesivamente, aunque haya etiquetas intermedias. En el ejemplo siguiente, únicamente los párrafos <p> dentro de un elemento de lista <li> dentro de una división <div> se ven de color rojo.

Selectores de hijos: E > F

Si se escriben dos etiquetas seguidas separadas por un signo "mayor que" (E > F), las propiedades afectan a los elementos con la segunda etiqueta (F) contenidos dentro de la primera etiqueta (E), pero no afecta si hay etiquetas intermedias entre ellos. En el ejemplo siguiente, únicamente los párrafos <p> dentro de una división <div> sin elementos intermedios se ven de color rojo.

Selectores de adyacentes: E+F

Si se escriben dos etiquetas seguidas separadas por un signo "más" (E + F), las propiedades afectan únicamente a los elementos con la segunda etiqueta (F) que van justo después de un elemento con la primera etiqueta (E). En el ejemplo siguiente, únicamente el párrafo <p> inmediatamente posterior a la división <div> se ven de color rojo.

Selectores de atributo

Hay cuatro formas de seleccionar elementos con determinados atributos: E[atributo], E[atributo="valor"], E[atributo~="valor"], E[atributo|="valor"].

Si se escribe una etiqueta seguida del nombre de un atributo entre corchetes, E[atributo], las propiedades afectan a todos los elementos que tengan establecidos ese atributo. En el ejemplo siguiente, los párrafos con clase, independientemente de la clase asignada, se muestran en mayúsculas.

Si se escribe una etiqueta seguida del nombre de un atributo igual a un valor entre corchetes, E[atributo="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo exactamente con ese valor. En el ejemplo siguiente, el párrafo con dos clases (asignadas en el mismo orden en el que aparecen entre corchetes en la hoja de estilo), se muestran en mayúsculas. Además, los párrafos con dos clases se ven de color azul porque las clases no se aplican en el orden en el que aparecen en el atributo clase, sino en el orden en que aparecen en la hoja de estilo.

Si se escribe una etiqueta seguida del nombre de un atributo tilde-igual a un valor entre corchetes, E[atributo~="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo con ese valor (entre otros).

Si se escribe una etiqueta seguida del nombre de un atributo |-igual a un valor entre corchetes, E[atributo|="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo con un valor que comience por ese valor seguido de un guión -. Este selector esta pensado para seleccionar elementos con diferentes variantes de un mismo idioma.

CSS Pseudo-elements

Syntax

The syntax of pseudo-elements:

CSS classes can also be used with pseudo-elements:

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):

Note: The "first-line" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-line" pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

The :first-letter Pseudo-element

The "first-letter" pseudo-element is used to add a special style to the first letter of a text:

Note: The "first-letter" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-letter" pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

The example above will display the first letter of all paragraphs with class="article", in red.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

CSS - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each <h1> element:

CSS - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after each <h1> element:

All CSS Pseudo Classes/Elements