i'm a beginner and have a question.
The goal : Render a bar under all ".title-title" classes NOT not the first one.
I made that and it's working great but for the purpose of learning I would like to see a better/one line/pro solution maybe ?
Thanks for your advices.
#second .title-title:after,
#third .title-title:after {
content: "";
display: block;
width: 40%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px red solid;
}
/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
text-align: center;
}
.py-mb-m {
margin-bottom: 10%;
}
<div id="first" class="py-ta-c py-mb-m">
<h2 class="title-title">First</h2>
<h4 class="title-subtitle">Exclude me</h4>
</div>
<div id="second" class="py-ta-c py-mb-m">
<h2 class="title-title">Second</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<div id="third" class="py-ta-c py-mb-m">
<h2 class="title-title">Third</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<!-- AND SO ON -->
By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element.
Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.
How to select all children of an element except the last child using CSS? When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
:not(:last-child) Combining these two above selector to excludes the last children (inner-div) of every parent div from the selection.
Apply to all and remove it from the first one:
/* All the titles */
.title-title:after {
content: "";
display: block;
width: 40%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px red solid;
}
/* We remove from the first one*/
#first .title-title:after {
display:none;
}
/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
text-align: center;
}
.py-mb-m {
margin-bottom: 10%;
}
<div id="first" class="py-ta-c py-mb-m">
<h2 class="title-title">First</h2>
<h4 class="title-subtitle">Exclude me</h4>
</div>
<div id="second" class="py-ta-c py-mb-m">
<h2 class="title-title">Second</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<div id="third" class="py-ta-c py-mb-m">
<h2 class="title-title">Third</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<!-- AND SO ON -->
Or use not()
selector:
/* Select all the divs but not the one with ID first*/
div:not(#first) .title-title:after {
content: "";
display: block;
width: 40%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px red solid;
}
/* OR
Select all the divs but not the first child
div:not(:first-child) .title-title:after { }
*/
/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
text-align: center;
}
.py-mb-m {
margin-bottom: 10%;
}
<div id="first" class="py-ta-c py-mb-m">
<h2 class="title-title">First</h2>
<h4 class="title-subtitle">Exclude me</h4>
</div>
<div id="second" class="py-ta-c py-mb-m">
<h2 class="title-title">Second</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<div id="third" class="py-ta-c py-mb-m">
<h2 class="title-title">Third</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<!-- AND SO ON -->
Another one with nth-child()
/nth-of-type()
(but be careful when the HTML structure changes):
/* This will select 2nd,3rd,4th .. */
div:nth-child(n+2) .title-title:after {
content: "";
display: block;
width: 40%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px red solid;
}
/* OR
div:nth-of-type(n+2) .title-title:after { }
*/
/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
text-align: center;
}
.py-mb-m {
margin-bottom: 10%;
}
<div id="first" class="py-ta-c py-mb-m">
<h2 class="title-title">First</h2>
<h4 class="title-subtitle">Exclude me</h4>
</div>
<div id="second" class="py-ta-c py-mb-m">
<h2 class="title-title">Second</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<div id="third" class="py-ta-c py-mb-m">
<h2 class="title-title">Third</h2>
<h4 class="title-subtitle">Include me</h4>
</div>
<!-- AND SO ON -->
You may also use :not(:first-child)
on the parent if you don't want to use any id:
div:not(:first-child) .title-title::after {
content: "";
display: block;
width: 40%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px red solid;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With