Frontend Training

<a href="www.google.com">Google</a>a {
    color: red;
}

<p class="align-center">Este texto está centrado.</p>.align-center {
    text-align: center;
}

<div id="modal">Este es un modal.</div>#modal {
    background-color: red;
    color: white;
    padding: 40px;
}

Este tipo de selector es usado para seleccionar todos los elementos.

* {
    margin: 0;
}

<input type="text">[type="text"] {
    background-color: blue;
    color: white;
}

El combinador ' ' (espacio en blanco) selecciona nodos que son hijos (no necesariamente directos) del elemento seleccionado previamente.

<div class="colors">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>.colors div {
    display: inline-block;
    height: 100px;
    width: 100px;
}

.colors .red {
    background-color: red;
}

.colors .green {
    background-color: green;
}

.colors .blue {
    background-color: blue;
}

El combinador '+' selecciona el nodo que sigue inmediatamente al elemento seleccionado previamente.

<h3 class="title-adjacent">Título</h3>
<p>Este texto es hermano del título porque tienen el mismo padre.</p>
<p>Este texto es hermano del título porque tienen el mismo padre.</p>.title-adjacent + p {
    background-color: red;
    color: white;
    padding: 10px;
}

El combinador '~' selecciona los nodos que siguen inmediatamente al elemento seleccionado previamente.

<h3 class="title-general">Título</h3>
<p>Este texto es hermano del título porque tienen el mismo padre.</p>
<p>Este texto es hermano del título porque tienen el mismo padre.</p>.title-general ~ p {
    background-color: red;
    color: white;
    padding: 10px;
}

El combinador '>' selecciona los nodos hijos directos del elemento seleccionado previamente.

<ul class="list-children">
    <li>
        Hijo directo
        <ul>
            <li>Hijo no directo</li>
        </ul>
    </li>
    <li>
        Hijo directo
        <ul>
            <li>Hijo no directo</li>
        </ul>
    </li>
</ul>.list-children li {
    background-color: red;
    color: white;
}

.list-children > li {
    background-color: blue;
}

Selecciona la primer letra de la primer línea de texto de un bloque.

<p class="chapter-start">Había una vez...</p>.chapter-start::first-letter {
    font-size: 3em;
    font-style: italic;
    font-weight: bold;
}

Son comunmente usados para añadir contenido estético a un elemento mediante la property content.

::before selecciona un elemento virtual que se encuentra antes del elemento seleccionado.

::after selecciona un elemento virtual que se encuentra luego del elemento seleccionado.

<div class="before-after">Este es un elemento cuyos elementos virtuales ::before y ::after fueron dados estilo.</div>.before-after {
    background-color: green;
}

.before-after::before {
    content: 'Before';
    background-color: red;
}

.before-after::after {
    content: 'After';
    background-color: blue;
}

<div class="popup">Este es un popup cuyo elemento virtual ::after tiene el estilo de una flecha.</div>.popup {
    position: relative;
    background-color: #007bff;
    border-radius: 4px;
    padding: 10px;
}

.popup::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 15px;
    color: white;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #007bff transparent transparent transparent;
}

Selecciona el elemento en estado hover (con el mouse posicionado por encima).

<div class="hover-over-me">Cambio el color de fondo cuando tengo el cursor encima.</div>.hover-over-me {
    border-radius: 4px;
    padding: 10px;
}

.hover-over-me:hover {
    background-color: red;
}

Selecciona el primer o último hijo.

<div class="button-group">
    <div class="button">Primero</div>
    <div class="button">Otro</div>
    <div class="button">Otro</div>
    <div class="button">Otro</div>
    <div class="button">Último</div>
</div>.button-group .button {
    display: inline;
    background-color: #007bff;
    border: 1px solid;
    padding: 10px;
    width: 40px;
}

.button-group .button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.button-group .button:last-child  {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.button-group .button:first-child, .button-group .button:last-child {
    background-color: red;
}