WEBVTT

00:00:00.342 --> 00:00:03.899
Estamos de vuelta con nuestra página web de donas y los peligros de comerlas.

00:00:03.899 --> 00:00:08.150
Me gusta mucho la clase "warning" que añadimos en nuestras etiquetas "" y "".

00:00:08.150 --> 00:00:12.673
Pero quiero hacer que este párrafo de advertencia se vea más destacado.

00:00:12.673 --> 00:00:16.889
Ahora tiene un borde gris, por la regla de clase "fact".

00:00:16.889 --> 00:00:20.922
Pero creo que se vería mejor con un borde naranja grueso.

00:00:20.922 --> 00:00:25.802
Vamos a tratar de añadirlo a la regla "warning".

00:00:25.802 --> 00:00:29.581
Escribimos "border: 5px solid orange".

00:00:29.675 --> 00:00:34.198
¡Ah! Me encanta. Pero también lo hizo en la etiqueta ""

00:00:34.219 --> 00:00:37.319
y no se ve bien en una línea de texto.

00:00:37.319 --> 00:00:39.982
Sólo quiero que esté en el párrafo de advertencia,

00:00:39.982 --> 00:00:43.744
no en la advertencia que es una línea de texto.

00:00:43.744 --> 00:00:46.511
¿Cómo puedo hacer una regla de CSS más específica?

00:00:46.511 --> 00:00:50.532
Bueno, una manera de abordarlo es hacer una nueva clase: "warning-paragraph",

00:00:50.532 --> 00:00:55.152
y mover las propiedades hacia allá. Pero no tenemos que hacer eso.

00:00:55.152 --> 00:01:01.220
En su lugar, vamos a decirle al navegador que aplique las propiedades de borde a las etiquetas de párrafo que tengan la clase "warning",

00:01:01.220 --> 00:01:04.576
pero no a otras etiquetas aunque tengan la clase "warning".

00:01:04.576 --> 00:01:09.121
Para hacer esa regla, primero escribimos el elemento que estamos buscando: "p",

00:01:09.121 --> 00:01:14.170
luego ponemos un punto, y el nombre de la clase: "warning".

00:01:14.170 --> 00:01:18.673
Eso le dirá al navegador que encuentre todas las etiquetas "" que tengan el nombre de clase "warning"

00:01:18.673 --> 00:01:21.385
y les aplique las propiedades.

00:01:21.385 --> 00:01:26.453
Así que vamos a pegar esta propiedad de borde aquí.

00:01:26.453 --> 00:01:34.321
¡Ya está! Tenemos el borde sólo en la clase "fact" y no está en la etiqueta "".

00:01:34.321 --> 00:01:37.595
Podemos hacer eso con cualquier combinación de elementos y nombres de clases,

00:01:37.595 --> 00:01:42.603
cuando queramos que el navegador aplique el estilo a etiquetas particulares que tengan una clase específica.

00:01:42.603 --> 00:01:45.233
Asegúrate de seguir exactamente esta secuencia:

00:01:45.233 --> 00:01:50.707
el nombre de la etiqueta, el punto y el nombre de la clase.

00:01:50.707 --> 00:01:56.453
Si pones un espacio accidentalmente entre el nombre de la etiqueta y el punto, no va a funcionar.

00:01:56.453 --> 00:01:59.940
Esto es porque el espacio significa otra cosa en CSS.

00:01:59.940 --> 00:02:02.795
Y el navegador interpreta esa regla de manera diferente.

00:02:03.124 --> 00:02:07.294
Mantente en sintonía para descubrir qué es ese espacio tan especial.