Want to learn Vue 3 fast? Vue.js 3 By Example is out now.
Buy it now at https://www.packtpub.com/product/vue-js-3-by-example/9781838826345
Want to learn Vue 3 fast? Vue.js 3 By Example is out now.
Buy it now at https://www.packtpub.com/product/vue-js-3-by-example/9781838826345
Sometimes, we want to select parent element with CSS.
In this article, we’ll look at how to select parent element with CSS.
To select parent element with CSS, we can use the has
pseudo-class.
For instance, we write
li:has(> a.active) {
/* styles to apply to the li tag */
}
to select the li that has the anchor element that has the active
class.
We use >
to get the direct children.
To select parent element with CSS, we can use the has
pseudo-class.
Sometimes, we want to remove the space between inline or inline-block elements with CSS.
In this article, we’ll look at how to remove the space between inline or inline-block elements with CSS.
To remove the space between inline or inline-block elements with CSS, we can use flexbox.
For instance, we write
<p>
<span> Foo </span>
<span> Bar </span>
</p>
to add a p element with 2 spans.
Then we style them by writing
p {
display: flex;
}
span {
width: 100px;
font-size: 30px;
color: white;
text-align: center;
}
We make the p element a flex container with display: flex
.
This will also remove the space between the child elements, which are the spans.
Then we style the span’s text with by changing the font size, color, and alignment.
To remove the space between inline or inline-block elements with CSS, we can use flexbox.
Sometimes, we want to center horizontally and vertically with CSS Flexbox.
In this article, we’ll look at how to center horizontally and vertically with CSS Flexbox.
To center horizontally and vertically with CSS Flexbox, we set flex-direction
to column
to make the main axis vertical.
Then we set justify-content
to center
to center the items vertically and set align-items
to center
to center them horizontally.
To do this, we write
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
to add some nested divs.
Then we write
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
to make the outer div a flex container with display: flex;
.
Then we align the child divs to be centered vertically and horizontally with
flex-direction: column;
justify-content: center;
align-items: center;
We set the height so that flex-direction: column
will be applied.
To center horizontally and vertically with CSS Flexbox, we set flex-direction
to column
to make the main axis vertical.
Then we set justify-content
to center
to center the items vertically and set align-items
to center
to center them horizontally.
Sometimes, we want to change an HTML5 input’s placeholder color with CSS.
In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.
To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder
selector.
For instance, we write
::placeholder {
color: #909;
}
to set the input placeholder’s color to #909.
To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder
selector.
Sometimes, we want to select the CSS parent element
In this article, we’ll look at how to select the CSS parent element.
To select the CSS parent element, we use the has
selector.
For instance, we write
li:has(> a.active) {
/*...*/
}
to select the li’s that has a
elements with the active class.
To select the CSS parent element, we use the has
selector.