Apply CSS to all elements within a div except for the first child

Hello, I am new to this and have a question.

My objective is to display a bar under all ".title-title" classes except the first one.

I managed to achieve this and it's working well, but for learning purposes, I would like to explore a more efficient/professional solution, maybe in just one line of code?

Thank you for your suggestions.

#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 custom bootstrap-inspired styles */
.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 -->

htmlcsscss-selectors

Answer №1

Make changes for all and exclude the first one:

/* Styling all titles */
.title-title:after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
/* Excluding the first one */
#first .title-title:after {
  display:none;
}

/* Adding my own CSS from bootstrap */
.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>

<!-- REPEAT FOR OTHER ELEMENTS -->

Alternatively, utilize the not() selector:

/* Selecting all divs except 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
Selecting all divs except the first child
div:not(:first-child) .title-title:after { }
*/


/* Adding my own CSS from bootstrap */
.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>

<!-- REPEAT FOR OTHER ELEMENTS -->

Another approach using nth-child()/nth-of-type() (keep in mind HTML structure changes may affect this method):

/* This will target 2nd, 3rd, 4th... elements */
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 { }

*/


/* Adding my own CSS from bootstrap */
.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>

<!-- REPEAT FOR OTHER ELEMENTS -->

Answer №2

Another option is to utilize :not(:first-child) within the parent element instead of relying on an 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;
}

Answer №3

.wrapper div h2:after {
  content: "";
  display: block;
  width: 40%;
  background: red;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
.wrapper div:first-child h2:after{
  display:none
}

/* This is a custom style inspired by Bootstrap */
.py-ta-c {
  text-align: center;
}

.py-mb-m {
  margin-bottom: 10%;
}

<div class="wrapper">

<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>

</div>
<!-- Continue adding content here -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on how to stop the loading animation and transition to a different slide using HTML and CSS

Check out this CSS code snippet @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); .loading { position: fixed; top: 0; left: 0; width: 100%; height: ...

htmlcss

Accessing firebase using a connection to HTML5 through codeanywhere's devbox

Recently, I added Firebase to my CodeAnywhere HTML5 connection. However, when I tried to execute the shell command firebase login, I was directed to a URL to log in. Despite successfully logging in and granting the necessary permissions, I encountered an e ...

htmlfirebasenpmfirebase-toolscodeanywhere

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

phpcss

Is it necessary to encode the content before transmitting HTML in JSON from the server to the client?

When it comes to sending HTML content from the server to the client for displaying user comments in a rich JS app that communicates through a JSON API, there are some considerations to keep in mind. One important question is how to handle the content with ...

javascripthtmljsonescapingsingle-page-application

Text displayed in two columns with a circular image positioned in the left column

https://i.sstatic.net/52mhN.jpgI am attempting to create a layout with two columns of text and a rounded image in the upper left corner of the left column. Here is what I have so far: <div class="photoside-left"> <img class="photo" src="http://v ...

htmlcss

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

htmlcssreactjstailwind-css

Create a slider feature on a webpage using the Google Maps API

A webpage has been created using the Google Map API. JSfiddle function initMap() { var intervalForAnimation; var count = 0; var map = new google.maps.Map(document.getElementById('map'), { cen ...

javascriptjqueryhtmlgoogle-maps

Adjustable width (100%) and set height for SVG

I am attempting to insert an SVG object onto my HTML page with a width of 100% and a fixed height. Upon viewing my fiddle, you will notice that the height of the dark-grey object changes based on the window proportions, which is not the desired outcome. ...

htmlcsssvg

Unclear about how inheritance works with the general sibling combinator "~" (tilde)?

When attempting to color list items in an unordered list using the general sibling combinator, nothing seems to happen: http://jsfiddle.net/bkbehpv0/ p { color: blue } h1 ~ li { color: red; } <h1> Title of site </h1> <p> Text in t ...

css

Having trouble with the "Cannot POST /contact.php" error message?

Help needed with ERROR "Cannot POST /contact.php". Here is the code: Code from index.html <form action="/contact.php" method="post"> <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> <div class="w3-half"> ...

phphtml

The button click event fails to trigger Jquery functions

I am trying to execute jQuery code when a button is clicked. Here is the jQuery code snippet: <script src="scripts/jquery-1.4.1.js"></script> <script type ="text/javascript" > $(document).ready(function () { $('#searchtextb ...

c#jqueryhtmlasp.net-mvc-4

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

jqueryhtmlcss

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

javascriptphphtml

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

htmlcsstwitter-bootstrap

Problem with spacing in Bootstrap horizontal layouts

My project is currently empty except for a code snippet I copied from Bootstrap's horizontal gutters page. Unfortunately, I am not seeing any horizontal gaps as expected. Why could this be? It seems that only vertical gutters are working... Click her ...

htmlcsstwitter-bootstrapbootstrap-5

Fetching Information from Firebase and Populating Dropdown Menus on a Website

Displayed below is a code snippet from a .JSON file stored in a Firebase database. "questionnaires" : { "ORANGE" : { "location" : "ny", "major" : { "engineering" : { "ECE" : { "3rd sem" : { "2018 ...

javascriptjqueryhtmljsonfirebase-realtime-database

Seeking assistance with troubleshooting JavaScript code for counting vowels

I am currently trying to debug a piece of code for my class. I have made several adjustments, but for some reason it is still not functioning correctly. The goal is to count the number of vowels in a given phrase and display them in the div element. Howeve ...

javascripthtmldebugging

Struggling with responsive design and the challenges of absolute positioning

Currently in the process of creating a page for case studies, where a main banner image is followed by 3 rows of 3 sub-images. Each image is added through the background-image property to maintain consistent div heights. The divs have a hover container on ...

htmlcssresponsive-design

Having trouble with Fancybox loading images from an external URL?

Here is an example of functioning HTML code: <a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png"> <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1"> ...

javascriptjqueryhtmlcss