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

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

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

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

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

0:00:20.922,0:00:25.802
Vamos a tratar de añadirlo a la regla "warning".

0:00:25.802,0:00:29.581
Escribimos "border: 5px solid orange".

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

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

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

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

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

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

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

0:00:55.152,0: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",

0:01:01.220,0:01:04.576
pero no a otras etiquetas aunque tengan la clase "warning".

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

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

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

0:01:18.673,0:01:21.385
y les aplique las propiedades.

0:01:21.385,0:01:26.453
Así que vamos a pegar esta propiedad de borde aquí.

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

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

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

0:01:42.603,0:01:45.233
Asegúrate de seguir exactamente esta secuencia:

0:01:45.233,0:01:50.707
el nombre de la etiqueta, el punto y el nombre de la clase.

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

0:01:56.453,0:01:59.940
Esto es porque el espacio significa otra cosa en CSS.

0:01:59.940,0:02:02.795
Y el navegador interpreta esa regla de manera diferente.

0:02:03.124,0:02:07.294
Mantente en sintonía para descubrir qué es ese espacio tan especial.