Hide the first div within the inner div of a section using CSS

I am working on a section that contains multiple nested divs. Within each outer div, there are 3-4 inner divs. My goal is to hide only the first inner div of each outer div while still displaying some text.

  section div div:nth-child(1){
    display: none;
  }
<section>
  <div >
    <div >
      first inner div of first outer
    </div>
    <div>
      <div >
        some text
      </div>
    </div>
    <div>
      second inner div of first outer
    </div>
  </div>

  <div >
    <div >
      first inner div of second outer
    </div>
    <div>
      <div >
        some text
      </div>
    </div>
    <div>
      second inner div of second outer
    </div>
  </div>
</section>

Unfortunately, I am unable to assign a class to any of the divs.

Any suggestions on how to achieve this would be greatly appreciated. Thank you.

Answer №1

Hide the first child of div inside a section using CSS:

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

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

What is the best way to align a group of checkboxes to the left side of the page

I am struggling to display a group of 8 checkboxes in 2 columns with labels on the right side of the checkboxes, and I want them to be left-aligned instead of center-aligned. Despite trying different approaches with the CSS, I can't seem to achieve th ...

The Electronjs application encountered an error while loading with the message "ReferenceError: require is not defined."

Having trouble with an electron application as I encounter an error when running npm start: $ npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483c2d3b3c087966786678">[email protected]</a> start C:& ...

Navigating through error messages in NextJs 14 can be tricky, especially when faced with the dreaded "ReferenceError: document not defined" or "prerendering error". It's vital to pinpoint exactly which page

When attempting to run the build on my Next.js application, I encountered an error message that is not very informative given the number of files/pages in my project. How can I pinpoint the exact location of this error and determine the root cause? The pro ...

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

How can I eliminate the outline from the modal backdrop using Material UI styling shown in the image provided?

https://i.stack.imgur.com/cBCzd.png After attempting to remove the border and box shadow, I am still encountering issues with lines appearing only when clicking on the modal body. The modal styling code has been omitted as it primarily includes flex styli ...

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

Could you explain the significance of the code "a[href*=#]:not([href=#])"?

I'm a bit confused about the meaning of this code. Can someone explain it to me? a[href*=#]:not([href=#]) Appreciate the help! ...

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Many drop down menus are present on my page; <... onchange="callthisfunction(...)"...> While a manual change easily triggers the function, using ajax to load saved data does not register the value as changed and the function is not triggered. Is th ...

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...

Bootstrap 5 and Vue 3 team up to create a stunning masonry layout

I've been struggling to find a proper solution for implementing a masonry layout in Vue 3 with Bootstrap. I tried using Bootstrap 5 cards with the Masonry CDN, but it resulted in squeezed and overlapping cards, failing to achieve the desired layout. I ...

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

I'm currently working on incorporating a PHP function into my HTML file using Ajax (which also contains JavaScript). My goal is to retrieve all locally stored JSON files. I've been following a guide at , but I'm facing some challenges. When ...

How to access bespoke attributes in Scene Builder using JavaFX?

I am on the hunt for a way to designate customizable properties for my custom controls. Jens Deters has already created some fantastic custom controls utilizing fontawesomefx for JavaFX. Once you import the jar files into Scene Builder, you can easily inc ...

Can Bootstrap be configured to use a single resolution exclusively?

Uncertain about the feasibility, I am initiating this inquiry. Can Bootstrap be utilized solely with one resolution (Medium desktop)? This question arises from the fact that the design I possess is catered towards Medium desktop (970px wide). My intentio ...

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png I'm working on translating this into HTML and CSS so that I can further develop it. The HTML Code: <!doctype html> <html> <head> <title> Trinit ...

PHP POST data not displaying in output

Having an issue with displaying the chosen value from a database enum in a text field on my website. The enum table has options like Bachelor of Science, Master of Science, Bachelor of Education, and Master of Education. I want to show the selected option ...