♣️ 🧀 👨🏻‍🏫 Mis preguntas CSS favoritas con respuestas detalladas 🌄 👬 👶🏾

Pasé por muchas entrevistas, y cuando se trataba de preguntas CSS, se redujeron a: "Enumere todas las formas conocidas de centrar un elemento". Después de 5 respuestas, francamente, estoy cansado de eso. Así que quiero compartir mis preguntas CSS favoritas que hago en una entrevista.

EN 1. ¿Cómo puedo configurar la opacidad para un elemento de botón que tiene un atributo deshabilitado?

Responder

, disabled, .

button[disabled] {
  opacity: 0.24;
}

EN 2. ¿Cómo puedo establecer la opacidad para el elemento span que sigue inmediatamente al elemento de entrada?

Responder

(+).

input + span {
  opacity: 0.24;
}

EN 3. ¿Cómo puedo configurar la opacidad de un elemento de entrada que tiene el atributo type establecido en "radio"?

Responder

type="radio" .

input[type="radio"] {
  opacity: 0.24;
}

A LAS 4. Hay un fragmento de código. Dime cuántos elementos con un fondo magenta habrá en el primer y segundo caso.

<div class="some-element">some text</div>
<div class="some-element">some text</div>
<article class="some-element">some text</article>

caso 1

.some-element:first-child {
  background-color: purple;
}

caso 2

.some-element:first-of-type {
  background-color: purple;
}

Responder

, — 2.

A LAS 5. ¿Qué es la pseudoclase: root?

Responder

:root — , . HTML html. SVG svg.

A LAS 6. ¿Cómo funciona la pseudoclase mostrada por el marcador de posición?

Responder

:placeholder-shown , input textarea placeholder. , placeholder , :placeholder-shown .

input:placeholder-shown {
  background-color: lightgray;
}

A LAS 7. ¿Cómo puedo configurar CSS para un elemento que tiene un elemento en foco?

Responder

:focus-within.

<div class="some-parent">
  <button type="button">Some button</button>
</div>

.some-parent:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

A LAS 8. Imagine que hay una tabla con datos. ¿Cuál es la forma de agregar opacidad para todas las líneas excepto la que el usuario ha señalado?

Responder

. tbody:hover , opacity . opacity , :not(:hover).

tbody:hover tr:not(:hover) {
  opacity: 0.24;
}

A LAS 9. ¿Cómo puedo reescribir el siguiente código para que el valor de la propiedad de color de fondo cambie automáticamente cuando cambie el valor de la propiedad de color?

.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

Responder

currentColor, color . .link.

.link {
  color: #222;
}

.link::before {
  background-color: currentColor;
}

A LAS 10. La unidad de medida rem se calcula según el valor de la propiedad de tamaño de fuente del elemento html. ¿Verdad o mentira?

Responder

11. button 16px font-size. 8px padding em?

8px 16px.

button {
  font-size: 16px;
  padding: .5em;
}

12. 10vw padding-left. px, — 480x320px?

vw — . 10vw 10% , . 480px. 10vw 48px.

13. div ?

<body>
  <div>element 1</div>
  <div>element 2</div>
</body>

div , .

14. width .child 1000px. ? ?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

. width . width .child width .

15. height ?

height .

16. . ?

17. .child — 196x196px. ?

<body>
  <span class="child">element</span>
</body>

.child {
  width: 196px;
  height: 196px;
}

, width height , .

18. .child ?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  margin-top: 10px;
}

, .child .parent, margin .

19. display ?

span {
  display: inline-block;
  position: absolute;
}

block. position: absolute . inline-block block.

20. width .child 1000px. ? ?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

.child {
  position: absolute;
}

. position: absolute width .

21. .parent ?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  position: absolute;
}

- , . , .parent .

22. span ?

span {
  width: 300px;
  height: 300px;
  position: absolute;
}

300x300px, span .

23. .child 20px .parent. ?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  box-sizing: border-box;
  width: 1000px;
  padding: 20px;
}

.child {
  position: absolute;
}

. position: absolute , , top, right, bottom, left. .child 20px , position: absolute .

24. display ?

span {
  display: inline-block;
  position: relative;
}

inline-block, .. position: relative, display.

25. span ?

span {
  width: 300px;
  height: 300px;
  display: flex;
}

display: flex, . width height span. — 300x300px.

26. .child display inline-block. ?

<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

. - . — block.

27. width .child . ?

<div class="parent">
  <div class="child">element2</div>
</div>

.parent {
  display: flex;
}

28. ?

<body>
  <div class="parent">
    <div class="first-child">element 1</div>
    <div class="second-child">element 2</div>
  </div>
</body>

.parent {
  display: flex;
  flex-direction: column;
}

.first-child {
  margin-bottom: 20px;
}

.second-child {
  margin-top: 10px;
}

30px, - .

29. .child ?

<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
  width: 250px;
  height: 250px;
}

.child {
  width: 100px;
  height: 100px;
  margin-top: auto;
  margin-left: auto;
}

150px.

B30 ¿Cuáles son los tamaños del elemento span en el siguiente ejemplo?

<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 100px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Responder

225px. flex-basis width, min-width max-width. 250px (flex-basis) , 225px.

Mis preguntas CSS favoritas con respuestas detalladas

More articles: