Selectores CSS

Selectores CSS
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos

HTML que desea aplicar estilo.
Podemos dividir los selectores de CSS en cinco categorías:
 Selectores simples (seleccione elementos según el nombre, la

identificación, la clase)
 Selectores de combinador (seleccione elementos en función de una
relación específica entre ellos)
 Selectores de pseudo-clase (seleccione elementos basados en un
cierto estado)
 Selectores de pseudo-elementos (seleccionar y aplicar estilo a una
parte de un elemento)
 Selectores de atributos (seleccione elementos basados en un atributo
o valor de atributo)
Esta página explicará los selectores de CSS más básicos.
Todos los selectores simples de CSS

Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements

element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
Orden en cascada
¿Qué estilo se utilizará cuando haya más de un estilo especificado para un
elemento HTML?
Todos los estilos de una página se convertirán en una "cascada" en una

nueva hoja de estilo "virtual" según las siguientes reglas, donde el número
uno tiene la máxima prioridad:
1. Estilo en línea (dentro de un elemento HTML)

2. Hojas de estilo externas e internas (en la sección de cabecera)
3. Navegador predeterminado
Por lo tanto, un estilo en línea tiene la máxima prioridad y anulará los

estilos externos e internos y los valores predeterminados del navegador.
En estos capítulos, aprenderá sobre las siguientes propiedades de fondo de

CSS:
 background-color background-color: lightblue
 background-image background-image: url("paper.gif");
 background-repeat background-repeat: repeat-x;O Y
 background-attachment background-attachment: fixed propiedad
especifica si la imagen de fondo debe desplazarse o ser fija (no se
desplazará con el resto de la página)
 background-position background-position: right top
 background (propiedad de taquigrafía)
 Todas las propiedades de fondo de
CSS
Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with

page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are position
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

Opacidad / Transparencia
La opacitypropiedad especifica la opacidad / transparencia de un
elemento. Puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor,
más transparente:
opacidad 1
opacidad 0,6
opacidad 0.3
opacidad 0.1
Estilo de borde CSS

La border-stylepropiedad especifica qué tipo de borde mostrar.
Se permiten los siguientes valores:
 dotted - Define un borde punteado

 dashed - Define un borde punteado
 solid - Define un borde sólido
 double - Define un borde doble
 groove- Define un borde acanalado en 3D. El efecto depende del
valor del color del borde.
 ridge- Define un borde estriado en 3D. El efecto depende del valor
del color del borde.
 inset- Define un borde insertado en 3D. El efecto depende del valor
del color del borde.
 outset- Define un borde inicial 3D. El efecto depende del valor del
color del borde.
 none - No define ningún borde
 hidden - Define un borde oculto
La border-stylepropiedad puede tener de uno a cuatro valores (para el borde

superior, el borde derecho, el borde inferior y el borde izquierdo).
La border-widthpropiedad especifica el ancho de los cuatro bordes.
El ancho se puede establecer como un tamaño específico (en px, pt, cm,
em, etc.) o usando uno de los tres valores predefinidos: delgado, medio o
grueso:
La border-colorpropiedad se utiliza para establecer el color de los cuatro

bordes.
El color se puede establecer mediante:
 nombre: especifique un nombre de color, como "rojo"

 HEX: especifique un valor HEX, como "# ff0000"
 RGB: especifique un valor RGB, como "rgb (255,0,0)"
 HSL: especifique un valor HSL, como "hsl (0, 100%, 50%)"
 transparente
Nota: Si border-colorno se establece, hereda el color del elemento.
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
background-color:
La border-radiuspropiedad se usa para agregar bordes redondeados a un

elemento:
Todas las propiedades de borde CSS

border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corner
border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
Las marginpropiedades de CSS se utilizan para crear espacio alrededor de

los elementos, fuera de los bordes definidos.
Con CSS, tienes control total sobre los márgenes. Existen propiedades para
establecer el margen para cada lado de un elemento (superior, derecha,
inferior e izquierda).
Margen: lados individuales
CSS tiene propiedades para especificar el margen para cada lado de un
elemento:
 margin-top
 margin-right
 margin-bottom
 margin-left
Todas las propiedades de los márgenes pueden tener los siguientes

valores:
 auto: el navegador calcula el margen

 longitud : especifica un margen en px, pt, cm, etc.
 % : especifica un margen en% del ancho del elemento contenedor
 heredar: especifica que el margen debe heredarse del elemento
principal
Consejo: se permiten valores negativos.
Margen - Propiedad de taquigrafía

Para acortar el código, es posible especificar todas las propiedades de los
márgenes en una propiedad.
La marginpropiedad es una propiedad abreviada para las siguientes

propiedades de margen individuales:
 margin-top
 margin-right
 margin-bottom
 margin-left
Pues así es como funciona:
Si la marginpropiedad tiene cuatro valores:
 margen: 25px 50px 75px 100px;

o el margen superior es de 25px
o el margen derecho es 50px
o el margen inferior es de 75 px
o el margen izquierdo es 100px
Ejemplo
Utilice la propiedad abreviada de margen con cuatro valores:
p {
margin: 25px 50px 75px 100px;
}
Las paddingpropiedades CSS se utilizan para generar espacio alrededor del

contenido de un elemento, dentro de los bordes definidos.
Con CSS, tienes control total sobre el relleno. Existen propiedades para

configurar el relleno para cada lado de un elemento (superior, derecha,
inferior e izquierda).
SS tiene propiedades para especificar el relleno para cada lado de un

elemento:
 padding-top
 padding-right
 padding-bottom
 padding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
 longitud : especifica un relleno en px, pt, cm, etc.

 % : especifica un relleno en% del ancho del elemento contenedor
 Heredar: especifica que el relleno debe heredarse del elemento
principal.
Nota: No se permiten valores negativos.
Las propiedades heighty widthse utilizan para establecer la altura y el ancho

de un elemento.
Las propiedades de alto y ancho no incluyen relleno, bordes ni

márgenes. Establece la altura / ancho del área dentro del relleno, el borde
y el margen del elemento.
Las propiedades heighty widthpueden tener los siguientes valores:
 auto- Esto es predeterminado. El navegador calcula la altura y el

ancho
 length - Define la altura / ancho en px, cm, etc.
 % - Define la altura / ancho en porcentaje del bloque contenedor
 initial - Establece la altura / ancho a su valor predeterminado
 inherit - La altura / ancho se heredará de su valor principal
El modelo de caja CSS

En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y
maquetación.
El modelo de caja CSS es esencialmente una caja que envuelve cada

elemento HTML. Consiste en: márgenes, bordes, relleno y el contenido
real. La siguiente imagen ilustra el modelo de caja:
Aquí está el cálculo:
320px (ancho)
+ 20px (relleno izquierdo + derecho)
+ 10px (borde izquierdo + derecho)
+ 0px (margen izquierdo + derecho)
= 350px
El ancho total de un elemento debe calcularse así:
Ancho total del elemento = ancho + relleno izquierdo + relleno derecho +

borde izquierdo + borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así:
Altura total del elemento = altura + relleno superior + relleno inferior +

borde superior + borde inferior + margen superior + margen inferior
La text-alignpropiedad se utiliza para establecer la alineación horizontal de

un texto.
Un texto puede estar alineado a la izquierda o derecha, centrado o

justificado.
El siguiente ejemplo muestra texto alineado al centro y alineado a la

izquierda y a la derecha (la alineación a la izquierda es la predeterminada si
la dirección del texto es de izquierda a derecha y la alineación a la derecha
es la predeterminada si la dirección del texto es de derecha a izquierda):
Cuando la text-alignpropiedad se establece en "justificar", cada línea se
estira para que cada línea tenga el mismo ancho y los márgenes izquierdo y
derecho sean rectos (como en revistas y periódicos):
Las propiedades directiony unicode-bidise pueden usar para cambiar la

dirección del texto de un elemento:
Ejemplo
p {
direction: rtl;
unicode-bidi: bidi-override;
}
La vertical-alignpropiedad establece la alineación vertical de un elemento.
Este ejemplo demuestra cómo establecer la alineación vertical de una

imagen en un texto:
Decoración de texto
La text-decorationpropiedad se utiliza para establecer o eliminar
decoraciones del texto.
El valor text-decoration: none;se usa a menudo para eliminar los subrayados

de los enlaces:
Ejemplo
a {
text-decoration: none;
}
Transformación de texto
La text-transformpropiedad se utiliza para especificar letras mayúsculas y
minúsculas en un texto.
Se puede usar para convertir todo en letras mayúsculas o minúsculas, o
poner en mayúscula la primera letra de cada palabra:
La text-indentpropiedad se utiliza para especificar la sangría de la primera

línea de un texto:
p {
text-indent: 50px;
}
La letter-spacingpropiedad se utiliza para especificar el espacio entre los

caracteres en un texto.
El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre

caracteres:
La text-shadowpropiedad agrega sombra al texto.
En su uso más simple, solo especifica la sombra horizontal (2px) y la

sombra vertical (2px):
Todas las propiedades de texto CSS

color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in

line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed sh

the user
unicode-bidi Used together with the direction property to set or return

should be overridden to support multiple languages in th
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a tex

En CSS, usamos la font-familypropiedad para especificar la fuente de un
texto.
La font-familypropiedad debe contener varios nombres de fuentes como un

sistema "alternativo", para garantizar la máxima compatibilidad entre
navegadores / sistemas operativos. Comience con la fuente que desee y
termine con una familia genérica (para permitir que el navegador elija una
fuente similar en la familia genérica, si no hay otras fuentes
disponibles). Los nombres de las fuentes deben estar separados por comas.
La font-stylepropiedad se usa principalmente para especificar texto en

cursiva.
Esta propiedad tiene tres valores:
 normal: el texto se muestra normalmente

 cursiva: el texto se muestra en cursiva
 oblicuo: el texto es "inclinado" (oblicuo es muy similar a la cursiva,
pero menos compatible)
La font-weightpropiedad especifica el peso de una fuente:
Ejemplo
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
La font-variantpropiedad especifica si un texto debe mostrarse o no en letra

minúscula.
aparecen en un tamaño de fuente más pequeño que las letras mayúsculas
originales en el texto.
Ejemplo
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
La font-sizepropiedad establece el tamaño del texto.
Ser capaz de administrar el tamaño del texto es importante en el diseño

web. Sin embargo, no debe usar ajustes de tamaño de fuente para que los
párrafos parezcan títulos o los títulos parezcan párrafos.
Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los
títulos y <p> para los párrafos.
El valor del tamaño de fuente puede ser un tamaño absoluto o relativo.
Tamaño absoluto:
 Establece el texto en un tamaño específico

 No permite que un usuario cambie el tamaño del texto en todos los
navegadores (malo por razones de accesibilidad)
 El tamaño absoluto es útil cuando se conoce el tamaño físico de la
salida
Tamano relativo:
 Establece el tamaño relativo a los elementos circundantes.

 Permite a un usuario cambiar el tamaño del texto en los
navegadores.
Nota: Si no especifica un tamaño de fuente, el tamaño predeterminado

para texto normal, como párrafos, es 16px (16px = 1em).
Establecer tamaño de fuente con Em
Para permitir a los usuarios cambiar el tamaño del texto (en el menú del
navegador), muchos desarrolladores usan em en lugar de píxeles.
1em es igual al tamaño de fuente actual. El tamaño de texto

predeterminado en los navegadores es de 16 píxeles. Entonces, el tamaño
predeterminado de 1em es 16px.
El tamaño se puede calcular de píxeles a em usando esta fórmula: píxeles /

16 = em
Tamaño de fuente adaptable

El tamaño del texto se puede establecer con una vwunidad, lo que significa
el "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del

navegador:
Si no desea utilizar ninguna de las fuentes estándar en HTML, puede utilizar

Google Fonts.
Las fuentes de Google son de uso gratuito y tienen más de 1000 fuentes
para elegir.
Cómo utilizar las fuentes de Google

Simplemente agregue un enlace de hoja de estilo especial en la sección
<head> y luego consulte la fuente en el CSS.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Habilitación de efectos de fuente

Google también ha habilitado diferentes efectos de fuente que puedes usar.
Primero agregue a la API de Google, luego agregue un nombre de clase

especial al elemento que va a usar el efecto especial. El nombre de la clase
siempre comienza y termina con .effect=effectnamefont-effect-effectname
Ejemplo
Agrega el efecto de fuego a la fuente "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
La propiedad de fuente CSS

Para acortar el código, también es posible especificar todas las propiedades
de fuente individuales en una propiedad.
La fontpropiedad es una propiedad abreviada para:
 font-style
 font-variant
 font-weight
 font-size/line-height
 font-family
Nota: Los valores font-sizey font-familyson obligatorios. Si falta uno de los

otros valores, se utiliza su valor predeterminado.
Ejemplo
Úselo fontpara establecer varias propiedades de fuente en una declaración:
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
Inténtalo tú mismo "
Enlaces de estilo
Los enlaces pueden ser de estilo con cualquier propiedad CSS (por
ejemplo color, font-family, background, etc.).
Además, los enlaces pueden tener un estilo diferente según el estado en

el que se encuentren.
Los cuatro estados de enlaces son:
 a:link - un enlace normal no visitado

 a:visited - un enlace que el usuario ha visitado
 a:hover - un enlace cuando el usuario pasa el mouse sobre él
 a:active - un enlace en el momento en que se hace clic en él
Propiedades de listas HTML y listas CSS

En HTML, hay dos tipos principales de listas:
 listas desordenadas (<ul>): los elementos de la lista están marcados

con viñetas
 listas ordenadas (<ol>): los elementos de la lista están marcados
con números o letras
Las propiedades de la lista CSS le permiten:
 Establecer diferentes marcadores de elementos de lista para listas

ordenadas
 Establecer diferentes marcadores de elementos de lista para listas
desordenadas
 Establecer una imagen como marcador de elemento de lista
 Agregar colores de fondo a listas y elementos de lista
Diferentes marcadores de elementos de

lista
La list-style-typepropiedad especifica el tipo de marcador de elemento de
lista.
El siguiente ejemplo muestra algunos de los marcadores de elementos de

lista disponibles:
Ejemplo
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Ejemplo de listas desordenadas:
o Café
o Té
o Coca Cola
 Café
 Té
 Coca Cola
Ejemplo de listas ordenadas:
I. Café
II. Té
III. Coca Cola
a. Café
b. Té
c. Coca Cola
Una imagen como marcador de elemento

de lista
La list-style-imagepropiedad especifica una imagen como marcador de
elemento de lista:
Ejemplo
ul {
list-style-image: url('sqpurple.gif');
}
Cuando se usa la propiedad abreviada, el orden de los valores de propiedad

es:
 list-style-type (si se especifica una imagen de estilo de lista, el valor

de esta propiedad se mostrará si la imagen por alguna razón no se
puede mostrar)
 list-style-position (especifica si los marcadores de elementos de la
lista deben aparecer dentro o fuera del flujo de contenido)
 list-style-image (especifica una imagen como marcador de elemento
de lista)
Si falta uno de los valores de propiedad anteriores, se insertará el valor

predeterminado de la propiedad que falta, si corresponde.
Para especificar los bordes de la tabla en CSS, use la borderpropiedad.
El siguiente ejemplo especifica un borde negro para los elementos <table>,

<th> y <td>:
table, th, td {

border: 1px solid black;
}
Contraer bordes de tabla
La border-collapsepropiedad establece si los bordes de la tabla deben
colapsarse en un solo borde:
La displaypropiedad especifica si / cómo se muestra un elemento.
Cada elemento HTML tiene un valor de visualización predeterminado según

el tipo de elemento que sea. El valor de visualización predeterminado para
la mayoría de los elementos es blocko inline.
display: none;se usa comúnmente con JavaScript para ocultar y mostrar

elementos sin eliminarlos y volver a crearlos. Eche un vistazo a nuestro
último ejemplo en esta página si desea saber cómo se puede lograr.
El <script>elemento utiliza display: none; por defecto.
Usando ancho, ancho máximo y margen:

auto;
Como se mencionó en el capítulo anterior; un elemento a nivel de bloque
siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y
hacia la derecha tanto como puede).
Establecer el widthde un elemento a nivel de bloque evitará que se extienda

hasta los bordes de su contenedor. Luego, puede establecer los márgenes
en automático, para centrar horizontalmente el elemento dentro de su
contenedor. El elemento ocupará el ancho especificado y el espacio
restante se dividirá en partes iguales entre los dos márgenes:
Este elemento <div> tiene un ancho de 500px y un margen establecido en

automático.
Nota: El problema con lo <div>anterior ocurre cuando la ventana del

navegador es más pequeña que el ancho del elemento. Luego, el
navegador agrega una barra de desplazamiento horizontal a la página.
El uso en su max-widthlugar, en esta situación, mejorará el manejo del
navegador de ventanas pequeñas. Esto es importante al hacer que un sitio
se pueda utilizar en dispositivos pequeños:
Este elemento <div> tiene un ancho máximo de 500px y un margen

establecido en automático.
Consejo: ¡ Cambie el tamaño de la ventana del navegador a menos de

500px de ancho para ver la diferencia entre los dos divs!
Aquí hay un ejemplo de los dos divs anteriores:
Elementos de alineación central

Para centrar horizontalmente un elemento de bloque (como <div>),
use margin: auto;
Establecer el ancho del elemento evitará que se estire hasta los bordes de
su contenedor.
A continuación, el elemento ocupará el ancho especificado y el espacio

restante se dividirá en partes iguales entre los dos márgenes:
Este elemento div está centrado.
Nota: La alineación central no tiene ningún efecto si la widthpropiedad no

se establece (o se establece en 100%).
Centro de alineación de texto

Para centrar el texto dentro de un elemento, use text-align: center;
Centrar una imagen

Para centrar una imagen, establezca el margen izquierdo y derecho
en autoy conviértalo en un blockelemento:
Ejemplo
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Alineación izquierda y derecha: posición

de uso
Un método para alinear elementos es usar position: absolute;:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Alineación izquierda y derecha: uso de

flotación
Otro método para alinear elementos es usar la floatpropiedad:
Ejemplo
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
El truco clearfix
Nota: Si un elemento es más alto que el elemento que lo contiene y está
flotando, se desbordará fuera de su contenedor. Puede utilizar el "truco
clearfix" para solucionar este problema (consulte el ejemplo a
continuación).
Ejemplo
.clearfix::after {
content: "";
clear: both;
display: table;
}
Centrar verticalmente: uso de relleno

Hay muchas formas de centrar un elemento verticalmente en CSS. Una
solución simple es usar top and bottom padding:
Para centrar tanto vertical como horizontalmente, use paddingy text-align:
center:
Ejemplo
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Centrar verticalmente: uso de altura de

línea
Otro truco es usar la line-heightpropiedad con un valor que sea igual a
la heightpropiedad:
Ejemplo
.center {
line-height: 200px;
height: 200px;
text-align: center;
}
/* If the text has multiple lines, add the following: */

.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Centrar verticalmente: uso de posición y
transformación
Si paddingy line-height no son opciones, otra solución es usar el
posicionamiento y la transformpropiedad:
Ejemplo
.center {
height: 200px;
position: relative;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Centrar verticalmente: uso de Flexbox
También puede usar flexbox para centrar las cosas. Solo tenga en cuenta
que flexbox no es compatible con IE10 y versiones anteriores:
Ejemplo
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
Un selector de CSS puede contener más de un selector simple. Entre los

selectores simples, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS:
 selector de descendientes (espacio)

 selector de niños (>)
 selector de hermanos adyacentes (+)
 selector general de hermanos (~)
Selector de descendientes
El selector de descendientes coincide con todos los elementos que son
descendientes de un elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> dentro de los

elementos <div>:
Ejemplo
div p {
background-color: yellow;
}
Selector de niños (>)

El selector de hijos selecciona todos los elementos que son hijos de un
elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> que son hijos de
un elemento <div>:
Ejemplo
div > p {
}
Selector de hermanos adyacentes (+)

El selector de hermanos adyacente se usa para seleccionar un elemento
que está directamente después de otro elemento específico.
Los elementos hermanos deben tener el mismo elemento padre y

"adyacente" significa "inmediatamente siguiente".
El siguiente ejemplo selecciona el primer elemento <p> que se coloca

inmediatamente después de los elementos <div>:
Ejemplo
div + p {
}
Selector general de hermanos (~)

El selector general de hermanos selecciona todos los elementos que son
hermanos de un elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> que son hermanos
de los elementos <div>:
Ejemplo
div ~ p {
}
Todos los selectores de combinador de

CSS
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> eleme
element+element div + p Selects the first <p> element that are placed immediately
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> ele
¿Qué son las pseudoclases?

Una pseudoclase se usa para definir un estado especial de un elemento.
Por ejemplo, se puede utilizar para:
 Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre

él
 Estilo de enlaces visitados y no visitados de forma diferente
 Aplicar estilo a un elemento cuando se enfoca
Sintaxis
La sintaxis de las pseudoclases:
selector:pseudo-class {
property: value;
}
Pseudoclases de anclaje
Los enlaces se pueden mostrar de diferentes formas:
Ejemplo
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Nota: a:hover DEBE ir después a:linky a:visiteden la definición de CSS para

que sea eficaz. a:active¡DEBE ir después a:hoveren la definición de CSS para
que sea efectivo! Los nombres de pseudo-clases no distinguen entre
mayúsculas y minúsculas.
Pseudoclases y clases CSS

Las pseudoclases se pueden combinar con clases CSS:
Cuando pasa el cursor sobre el enlace en el ejemplo, cambiará de color:
Ejemplo
a.highlight:hover {
color: #ff0000;
}
Coloca el cursor sobre <div>

Un ejemplo del uso de la :hoverpseudoclase en un elemento <div>:
Ejemplo
div:hover {
background-color: blue;
}
Desplazamiento de información sobre

herramientas simple
Desplácese sobre un elemento <div> para mostrar un elemento <p>
(como una información sobre herramientas):
Coloca el cursor sobre mí para mostrar el elemento <p>.
Ejemplo
p {
display: none;
padding: 20px;
}
div:hover p {
display: block;
}
CSS: la pseudoclase del primer hijo

La :first-childpseudoclase coincide con un elemento especificado que es el
primer hijo de otro elemento.
Coincide con el primer elemento <p>

En el siguiente ejemplo, el selector coincide con cualquier elemento <p>
que sea el primer hijo de cualquier elemento:
Ejemplo
p:first-child {
color: blue;
}
Coincide con el primer elemento <i> en

todos los elementos <p>
En el siguiente ejemplo, el selector coincide con el primer elemento <i> en
todos los elementos <p>:
Ejemplo
p i:first-child {
color: blue;
}
Coincidir con todos los elementos <i> en

todos los elementos <p> del primer hijo
En el siguiente ejemplo, el selector coincide con todos los elementos <i> en
los elementos <p> que son el primer hijo de otro elemento:
Ejemplo
p:first-child i {
color: blue;
}
CSS: la pseudoclase: lang

La :langpseudoclase le permite definir reglas especiales para diferentes
idiomas.
En el siguiente ejemplo, :langdefine las comillas para los elementos <q>

con lang = "no":
Ejemplo
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Todas las pseudoclases de CSS

:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no child
:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first
:first-of-type p:first-of-type Selects every <p> element that is the first <
parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value withi
:invalid input:invalid Selects all <input> elements with an invalid
:lang(language) p:lang(it) Selects every <p> element with a lang attri

with "it"
:last-child p:last-child Selects every <p> elements that is the last
:last-of-type p:last-of-type Selects every <p> element that is the last <
parent
:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p> elem
:nth-child(n) p:nth-child(2) Selects every <p> element that is the secon
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the secon

parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the secon

its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the secon

its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <
parent
:only-child p:only-child Selects every <p> element that is the only c
:optional input:optional Selects <input> elements with no "required
:out-of-range input:out-of-range Selects <input> elements with a value outsi
:read-only input:read-only Selects <input> elements with a "readonly"

:read-write input:read-write Selects <input> elements with no "readonly
:required input:required Selects <input> elements with a "required"
:root root Selects the document's root element
:target #news:target Selects the current active #news element (c

containing that anchor name)
:valid input:valid Selects all <input> elements with a valid va
:visited a:visited Selects all visited links
Todos los pseudoelementos CSS

::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selec
¿Qué son los pseudoelementos?

Un pseudoelemento CSS se utiliza para diseñar partes específicas de un
elemento.
Por ejemplo, se puede utilizar para:
 Aplicar estilo a la primera letra o línea de un elemento

 Insertar contenido antes o después del contenido de un elemento
Sintaxis
La sintaxis de los pseudo-elementos:
selector::pseudo-element {
property: value;
}
El :: Pseudo-elemento de primera línea

El ::first-linepseudoelemento se usa para agregar un estilo especial a la
primera línea de un texto.
El siguiente ejemplo formatea la primera línea del texto en todos los

elementos <p>:
Ejemplo
p::first-line {
color: #ff0000;
}
Nota: El ::first-linepseudoelemento solo se puede aplicar a elementos a

nivel de bloque.
Las siguientes propiedades se aplican al ::first-line pseudoelemento:
 propiedades de fuente
 propiedades de color
 propiedades de fondo
 espaciado entre palabras
 espaciado de letras
 decoración de texto
 alineación vertical
 transformación de texto
 altura de la línea
 claro
Observe la notación de dos puntos - ::first-line versus :first-line
Los dos puntos reemplazan la notación de dos puntos únicos para los
pseudoelementos en CSS3. Este fue un intento del W3C de distinguir
entre pseudoclases y pseudoelementos .
La sintaxis de dos puntos se utilizó tanto para pseudoclases como para

pseudoelementos en CSS2 y CSS1.
Para compatibilidad con versiones anteriores, la sintaxis de dos puntos es

aceptable para los pseudoelementos CSS2 y CSS1.
El :: Pseudo-elemento de primera letra

El ::first-letterpseudoelemento se usa para agregar un estilo especial a la
primera letra de un texto.
El siguiente ejemplo formatea la primera letra del texto en todos los

elementos <p>:
Ejemplo
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Nota: El ::first-letterpseudoelemento solo se puede aplicar a elementos a

nivel de bloque.
Las siguientes propiedades se aplican al pseudoelemento :: primera letra:
 propiedades de fuente
 propiedades de color
 propiedades de fondo
 propiedades de margen
 propiedades de relleno
 propiedades fronterizas
 decoración de texto
 alineación vertical (solo si "flotante" es "ninguno")
 transformación de texto
 altura de la línea
 flotador
 claro
Pseudoelementos y clases CSS

Los pseudoelementos se pueden combinar con clases CSS:
Ejemplo
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
El ejemplo anterior mostrará la primera letra de los párrafos con class =

"intro", en rojo y en un tamaño más grande.
Múltiples pseudo-elementos
También se pueden combinar varios pseudoelementos.
En el siguiente ejemplo, la primera letra de un párrafo será roja, con un

tamaño de fuente xx grande. El resto de la primera línea será azul y en
minúsculas. El resto del párrafo tendrá el tamaño y color de fuente
predeterminados:
Ejemplo
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
}
CSS - El :: pseudo-elemento anterior

El ::beforepseudoelemento se puede utilizar para insertar algún contenido
antes del contenido de un elemento.
El siguiente ejemplo inserta una imagen antes del contenido de cada

elemento <h1>:
Ejemplo
h1::before {
content: url(smiley.gif);
}
CSS - El :: after Pseudo-elemento

El ::afterpseudoelemento se puede utilizar para insertar algún contenido
después del contenido de un elemento.
El siguiente ejemplo inserta una imagen después del contenido de cada

elemento <h1>:
Ejemplo
h1::after {
content: url(smiley.gif);
}
CSS - El pseudoelemento :: marcador

El ::markerpseudoelemento selecciona los marcadores de los elementos de
la lista.
El siguiente ejemplo aplica estilo a los marcadores de los elementos de la

lista:
Ejemplo
::marker {
color: red;
font-size: 23px;
}
CSS - El pseudoelemento :: selección

El ::selectionpseudoelemento coincide con la parte de un elemento que
selecciona un usuario.
Las siguientes propiedades CSS se pueden aplicar

a ::selection: color, background, cursor, y outline.
El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo
amarillo:
Ejemplo
::selection {
color: red;
background: yellow;
}
La opacitypropiedad especifica la opacidad / transparencia de un

elemento.
Efecto de desplazamiento transparente

La opacitypropiedad se usa a menudo junto con el :hover selector para
cambiar la opacidad al pasar el mouse:
Ejemplo
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Ejemplo explicado
El primer bloque CSS es similar al código del Ejemplo 1. Además, hemos
agregado lo que debería suceder cuando un usuario pasa el mouse sobre
una de las imágenes. En este caso, queremos que la imagen NO sea
transparente cuando el usuario pasa el mouse sobre ella. El CSS para esto
es opacity:1;.
Cuando el puntero del mouse se aleja de la imagen, la imagen volverá a ser

transparente.
Un ejemplo de efecto de desplazamiento invertido:
Caja transparente
Cuando se usa la opacitypropiedad para agregar transparencia al fondo de
un elemento, todos sus elementos secundarios heredan la misma
transparencia. Esto puede hacer que el texto dentro de un elemento
completamente transparente sea difícil de leer:

Selectores CSS

Cargado por

Copyright:

Formatos disponibles

Selectores CSS

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Selectores CSS

Cargado por

Copyright:

Formatos disponibles

Selectores CSS

Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos

Podemos dividir los selectores de CSS en cinco categorías:

 Selectores simples (seleccione elementos según el nombre, la

Esta página explicará los selectores de CSS más básicos.

Todos los selectores simples de CSS

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

Todos los estilos de una página se convertirán en una "cascada" en una

1. Estilo en línea (dentro de un elemento HTML)

Por lo tanto, un estilo en línea tiene la máxima prioridad y anulará los

En estos capítulos, aprenderá sobre las siguientes propiedades de fondo de

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with

background-clip Specifies the painting area of the background

background-color Sets the background color of an element

background-image Sets the background image for an element

background-origin Specifies where the background image(s) is/are position

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-size Specifies the size of the background image(s)

Estilo de borde CSS

Se permiten los siguientes valores:

 dotted - Define un borde punteado

La border-stylepropiedad puede tener de uno a cuatro valores (para el borde

La border-colorpropiedad se utiliza para establecer el color de los cuatro

El color se puede establecer mediante:

 nombre: especifique un nombre de color, como "rojo"

Nota: Si border-colorno se establece, hereda el color del elemento.

La border-radiuspropiedad se usa para agregar bordes redondeados a un

Todas las propiedades de borde CSS

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-right Sets all the right border properties in one declaration

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

Las marginpropiedades de CSS se utilizan para crear espacio alrededor de

Todas las propiedades de los márgenes pueden tener los siguientes

 auto: el navegador calcula el margen

Consejo: se permiten valores negativos.

Margen - Propiedad de taquigrafía

La marginpropiedad es una propiedad abreviada para las siguientes

Pues así es como funciona:

Si la marginpropiedad tiene cuatro valores: