Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion exercises/04.2-Apply-several-classes/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Vamos a usar clases y aplicarlas al mismo elemento `<div>`.
<div class="card spades">9</div>
```

La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, etc.
La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, alto, etc.

La clase `spades` contiene las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas).

Expand Down
3 changes: 2 additions & 1 deletion exercises/04.2-Apply-several-classes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ We are going to use two classes and apply them to the same `<div>` element.
<div class="card spades">9</div>
```

The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc.
The class `card` contains the styling rules to make the div look like a card: borders, height, width, etc.

The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades symbol).

There are two possible suite classes you can apply to the html element to make it look like a real poker card.
Expand Down
2 changes: 1 addition & 1 deletion exercises/04.3-id-Selector/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ También puedes seleccionar un elemento por su `#id` y aplicarle estilos.
}
```

Usa la propiedad `id` del elemento HTML para seleccionarlo. Los `id` deben ser únicos, solo un elemento puede tener la misma `id`.
Usa la propiedad `id` del elemento HTML para seleccionarlo. Los `id` deben ser únicos, así que no uses el mismo `id` en más de un elemento.

*La etiqueta HTML con `id="small"` tendrá un font-size de `9px`.*

Expand Down
4 changes: 2 additions & 2 deletions exercises/04.3-id-Selector/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ You can also select an element by `#id` and apply styles to it.
}
```

Use the `id` property of the HTML element to select it. `Ids` should be unique, only one element must have the same ìd`.
Use the `id` property of the HTML element to select it. `ids` should be unique, don't use the same `id` on more than one element.

*The html tag with the `id="small"` will have a font-size of `9px`.*
*The HTML tag with the `id="small"` will have a font-size of `9px`.*

## 📝 Instructions:

Expand Down
4 changes: 2 additions & 2 deletions exercises/04.3-id-Selector/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ test("There should be a span tag", () => {
expect(span).toBeTruthy()
});

test("The span tag should have id 'button1'", () => {
test("The span tag should have the id 'button1'", () => {
expect(span).toBeTruthy();
let id = span.id
expect(id).toBeTruthy();
Expand All @@ -34,4 +34,4 @@ test("You should not change the existing head tag elements", () => {

const href = link.getAttribute("href");
expect(href).toBe('./styles.css');
});
});
6 changes: 3 additions & 3 deletions exercises/05-Specificity/README.es.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# `05` Especificidad

Al crear un documento CSS, debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS.
Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS.

Se trata del nivel de especificidad. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡y punto!
Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡Y punto!


*Porque cuanto más específico, más prioridad tiene.*
Expand All @@ -13,4 +13,4 @@ Se trata del nivel de especificidad. Si especificas que tu `div` con `id="thirdi

## 💡 Pista:

+ Puedes usar la anotación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/
+ Puedes usar la anotación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/
8 changes: 4 additions & 4 deletions exercises/05-Specificity/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI"
When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works.


It's all about the level of Specificity. If you specify that your `div` with `id="thirditem` has a yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto!
It's all about the level of **specificity**. If you specify that your `div` with `id="thirditem` has a yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto!

*Because the more specific, the more priority it has.*

## 📝 Instrucciones:
## 📝 Instructions:

1. Override the `background` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
1. Override the `background` of `#thirditem` without deleting any CSS code, simply append to the CSS a more specific rule at the end of the document to override the background-color to green.


### 💡 Hint:
## 💡 Hint:

You can use the **!important** annotation:
https://css-tricks.com/when-using-important-is-the-right-choice/
Expand Down
2 changes: 1 addition & 1 deletion exercises/05-Specificity/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<li>My first item of the list</li>
<li>My second item of the list</li>
<li id="thirditem">My third item of the list</li>
<li>My forth item of the list</li>
<li>My fourth item of the list</li>
<li>My fifth item of the list</li>
</ul>
</body>
Expand Down
3 changes: 2 additions & 1 deletion exercises/05-Specificity/solution.hide.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ ul li {
li + #thirditem {
background: yellow;
}
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/

#thirditem {
background: green !important;
}
2 changes: 1 addition & 1 deletion exercises/05-Specificity/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ ul li {
li + #thirditem {
background: yellow;
}
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/