HTML5 y CSS3 pt. 4: Avanzando en CSS 04

Selectores avanzados css.
Cálculos con css y medidas proporcionales.

004_primeras_paginas/README.md

@@ -292,9 +292,10 @@ p.test { color: magenta; }
 
 </details></br>
 
-- Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
+- Etiqueta [fieldset](./html_css_parte3/contacto.html#L40) como agrupador y
+[leyend](./html_css_parte3/contacto.html#L41) como parrafo.
 - Descripción de imagenes `alt="Descripción de imagen"`.
-- Clase css *enviar* para input submit "Enviar Formulario"
+- Clase css [enviar](./html_css_parte3/style.css#L123) para input submit "Enviar Formulario"
 [contacto](./html_css_parte3/contacto.html#L63).
 - [Propiedades](./html_css_parte3/style.css#L123): cursor (pointer), transition,
 transform (scale, rotate).
@@ -325,6 +326,41 @@ utilizar [style.css](./html_css_parte4/style.css).
     - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
 </details>
 
-- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L234).
-- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L284).
+- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237).
+- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287).
+
+#### Selectores avanzados CSS
+
+Aplicar estilo solo los hijos directos de `<main>`, ejemplos.
+
+```css
+main > p{
+    background: red;
+}
+```
+
+Aplicar estilo solo parrafo que esté despues de una imagen `<img>`.
+
+```css
+img + p{
+    background: yellow;
+}
+```
+
+Aplicar estilo a todos los parrafos que estén despues de una imagen `<img>`.
+
+```css
+img ~ p{
+    background: green;
+}
+```
+
+Aplicar estilo a todos los parrafos que estén despues de una imagen a excepcion
+de aquellos que tengan el id `mision`.
+
+```css
+.principal p:not(#mision){
+    background: cyan;
+}
+```
 

004_primeras_paginas/html_css_parte4/index.html

@@ -28,7 +28,7 @@
              alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
         <main>
             <section class="principal">
-                <h2 class="titulo-principal">Sobre Barbería Alura</h1>
+                <h2 class="titulo-principal">Sobre Barbería Alura</h2>
                 <img class="utiles" src="./imagenes/utiles.jpg" alt="Utensilios de barbero"/>
 
                 <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae

004_primeras_paginas/html_css_parte4/style.css

@@ -226,6 +226,9 @@ p:first-line {
 }
 
 .utiles {
+    /* Cálculos con css
+    width: calc(40% - 30px):
+    */
     width: 120px;
     float: left;
     margin: 0 20px 20px 0;