Choosing the right eldest offspring

I've been struggling to target the initial div with the 'section' class in my CSS code. Here's a simplified version of my HTML:

<div id="page_container">
    <div></div> // this div has content, but no id or class
    <div class="holder"></div> // this div has content
    <div class="section"></div> // <<<< trying to select this first 'section' div
    <div class="section"></div> // other 'section's should not be selected
    <div class="section"></div>
    <div class="section"></div>
</div>

In terms of CSS attempts...

#page_container > div > .section:first-child {
    ...styles here
}

#page_container > div:first-child(.section) { 
    ...styles here
}

#page_container > div > div > .section:first-child {
    ...styles here
}

...but none seem to work for me.

I might just be drawing a blank, so if anyone could help figure out how to target only the very first 'section' class div, I would greatly appreciate it!

Answer №1

Give this a shot.

#content_box .box{
  background: blue;
  margin: 20px 0;
}

#content_box .box ~ .box {
    background: transparent;
}
<div id="content_box">
    <div>this is a div with content, but no specific identifier</div>
    <div class="holder">this div has some content</div>
    <div class="box">select this particular div; the first one with the class 'box'</div>
    <div class="box">I'm not interested in other instances of 'box'</div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Answer №2

If you want to select adjacent elements, you can utilize the + Combinator.

Adjacent sibling combinator

The + combinator targets siblings that are next to each other. They must share the same parent element.

Syntax: A + B

Example: Using h2 + p will match any <p> tags that come directly after an <h2>.

For more information, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Here's an example:

#page_container > .holder + .section {
    background: red;
}
<div id="page_container">
    <div>This div has content, but no id or class</div> 
    <div class="holder">This div has content</div> 
    <div class="section">This is the first div with the class 'section'</div>
    <div class="section">I don't want to target other 'section's</div>  
    <div class="section"></div>
    <div class="section"></div>
</div>

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

What is the best way to target the specific DIV using a jQuery selector?

My dynamic div is filled with other divs... <div id="wrapper"> </div> //javascript for(//lots of times){ var d = document.cloneNode('divModel'); d.foo = {//a lot of stuff }; document.getChildById('wrapper').append ...

The content following customized checkboxes does not align with the baseline

Here is the code snippet: <p><input type="checkbox" /> Pavement <input type="checkbox" /> Dirt or rocky trails <input type="checkbox"/> Gravel roads</p> As well as the accompanying CSS: h1, input, button, textarea, progress ...

Text-only Bootstrap.js CarouselThis Bootstrap.js Carousel displays text-only

I used a tutorial to create a Carousel slide. Initially, I defined each item with an image and paragraph like this - <div class="item"> <img src="http://placehold.it/1200x480" alt="" /> <div class="carousel-caption"> < ...

Swapping stylesheets using a hyperlink - a simple guide

Currently, I am creating a website that utilizes PHP, XHTML strict, and jQuery. The main goal is to ensure the site is adaptable for mobile and desktop devices by implementing the principles of Responsive Web Design. This involves serving different stylesh ...

Bottom is not adhering properly to the page (blocking content)

Hey there! I'm using Weebly as a CMS for my website, and I've encountered some issues with a custom footer. Specifically, on this page: The content seems to disappear if you're not using a large monitor and the page height is short. Upon in ...

HTML5 header video with a subtle color palette

Is there a way to insert a muted video in the header that spans the full width but only has a height of 300px? The issue I am encountering is that when I decrease the height of the video, the width automatically decreases as well. However, what I want is ...

Can you explain the purpose of the spaces on the buttons?

mysterious button spacing issue <div class="buttons"> <button id="btn-search" type="submit">Search Engine</button> <button id="btn-lucky" type="submit">Feeling Lucky Today</button> </div> .buttons { max-width: 29 ...

Prevent the dragging of images on an HTML page

I've been struggling to prevent an image from being dragged on my webpage. I've tried various methods but nothing seems to be working. Can anyone provide some guidance? Using the image as a background is not an option for me since I need to resi ...

Modify the background hue of a personalized WordPress HTML block using supplementary CSS styling

My current challenge involves modifying the background color of a specific custom HTML WordPress block. However, when I make changes to one block, it affects the background color of all other custom HTML blocks on different pages. Here is the CSS code I a ...

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

Determining the visible dimensions of an iframe

Is there a way to determine the visual size inside an iframe using JavaScript or jQuery? In this scenario, only a portion of the iframe is displayed. The iframe itself has dimensions of 300x300, but it is being limited by a div to 300x100. <div style= ...

What are the different methods for completing a form?

From what I understand, there are 2 methods for submitting a form. For instance, in asp.net, there is the Button.UseSubmitBehavior property which Specifies whether the Button control uses the client browser's submit mechanism or the ASP.NET postb ...

Send the JSON response to a different HTML page in Angular

Recently, I started working with Angular and encountered an issue while trying to redirect the response of http.get to another HTML page named result.html. To achieve this, I utilized services for data sharing: Below is my controller code: app.controll ...

Incorporate ES6 module functions directly into HTML for seamless integration

I am grappling with a rather straightforward task: I have some code in a JavaScript module file that I import into another JavaScript file (which doesn't export anything), and my goal is to directly call certain functions defined in that file from the ...

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

The DIV element fails to encompass all of its content

There seems to be an issue with the only div element on my page. It's covering the middle of the page, but I managed to make it extend all the way down using CSS tweaks. However, there is a problem - the video inside the div is overflowing: Below is ...

Encountering an issue with loading objects in THREE.js

Recently, I started exploring threejs and decided to create a simple 'Hello World' project by creating a basic shape. I am using c9.io to write my code, but I suspect it might be causing an issue as my code is not executing properly. Below are so ...

When accessing $elem.style.display, it consistently returns an empty string

Currently working on a project with a website here: Looking for a solution to determine the visibility of the element #cookie-law-info-bar. Unfortunately, the usual is('visible') method is not functioning as expected in Chrome. Therefore, I am ...

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...

What sets apart adding a row from adding a col-12 in Bootstrap 4?

I have a doubt that I'm trying to clarify, but unfortunately it's not mentioned in the Bootstrap 4 documentation. Can someone explain the difference between these two code snippets? <div class="container"> <div class="row"> < ...