This content originally appeared on DEV Community and was authored by Stas Melnikov
Q. Can I set the following for the parent element when the a element received focus?
<div class="parent">
<a href="https://dev.to">Some text</a>
</div>
Answer
We can use the :focus-within pseudo-class to style the parent elements that have an element that has received focus.
.parent:focus-within {
outline: 2px solid purple;
outline-offset: 5px;
}
Q. Is the following code valid? True or false?
.parent {
background-position: right 8px top;
}
Answer
True. We can set offset from edges using 2 ways.
The first way is using 3-value syntax. When two values are keyword values, and the third is the offset for the preceding value.
.parent {
background-position: right 8px top;
}
/* or */
.parent {
background-position: right top 5px;
}
The second way is using 4-value syntax. The first and third values are keyword values defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values.
.parent {
background-position: right 8px top 5px;
}
Q. Is there a way to rewrite the following code in such a way that the background-color value automatically changes when the color value is changed?
.link {
color: #222;
}
.link::before {
background-color: #222;
}
Answer
Yes. The currentColor keyword represents the value of an element color property. In our case, we can inherit a value from the .link element.
.link {
color: #222;
}
.link::before {
background-color: currentColor;
}
Q. What's the goal of the calc() function?
Answer
The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/).
Q. Which is the computed value in pixels of the padding property in the following example?
.button {
font-size: 16px;
padding: 0.5em;
}
Answer
You should multiply 16 by 0.5. You will get 8px as the computed value in pixels.
Q. In the following example, the padding-left property has the 10vw value. What's the computed value in px if a user visits the website using a device with 480x320px display?
.parent {
padding-left: 10vw;
}
Answer
Viewport Width (vw) is a percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width. In our case that's 480px. So 10vw is 48px. But if a user rotates the device it will be 32px because the viewport width will be 320px.
Q. The .child elements will be rendered in the column the following example. True or false?
<body>
<div class="child">element 1</div>
<div class="child">element 2</div>
</body>
Answer
True. The .child elements are the block-level elements. These types of elements are rendered in the column by default.
Which is the width computed value of the .child element?
<body>
<div class="parent">
<div class="child">child element</div>
</div>
</body>
.parent {
width: 1000px;
}
Answer
The .child element is block-level element. So the width fills up the horizontal space left and right on its parent element if it's there. So the .child element will has the width computed value is 1000px.
Q. The .child elements will be rendered in the line the following example. True or false?
<body>
<span class="child">element 1</span>
<span class="child">element 2</span>
</body>
Answer
True. The span elements will be on the same line if there is space. If there isn't space, a browser will move an element on a new line.
Q. 196px is the width and height computed value of the .child element. True or false?
<body>
<span class="child">element</span>
</body>
.child {
width: 196px;
height: 196px;
}
Answer
False, because the width and height properties of an inline element is calculated depending on the amount of content.
Q. Which the display computed value of the .child element in the following example?
.child {
display: inline-block;
position: absolute;
}
Answer
If the element has position: absolute the display property will be set to the block value. So display: inline-block is ignored.
Q. The height computed value of the .parent element is 0. True of false?
<body>
<div class="parent">
<div class="child">some content</div>
</div>
</body>
.child {
position: absolute;
}
Answer
True. The absolutely-positioned element is removed from the normal document flow. In our example, the .parent has only one child element that's absolutely-positioned. So the parent height is 0.
Q. Which the display computed value of the .child element in the following example?
.child {
display: inline-block;
position: relative;
}
Answer
If an element has position: relative browsers don't change the display computed value. So the display computed value is inline-block.
Q. The display computed value of the .child element is inline-block. True of false?
<div class="parent">
<span class="child">some content</span>
</div>
.parent {
display: flex;
}
.child {
display: inline-block;
}
Answer
False. All child elements inside of a flex container are blockfield always. So the computed display value of the .child is block.
Q. What's the width computed value of the .child element in the following example?
<div class="parent">
<span class="child">some content</span>
</div>
.parent {
display: flex;
}
.child {
flex-basis: 250px;
width: 100px;
height: 200px;
min-width: 150px;
max-width: 225px;
}
Answer
225px. The flex-basis property has priority over the width and height properties. Also the value of it must be in the range of values of the min-width (100px) and max-width (225px) properties. In our case, 250px is greater than max-width value (225px). So it's limited by 225px.
P.S.
❤ Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis, Spiridon Konofaos.
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2022-04-11T17:08:51+00:00) My top CSS questions with detailed answers. Retrieved from https://www.scien.cx/2022/04/11/my-top-css-questions-with-detailed-answers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.