What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the second div directly without adding a class or using nth-child in the section itself.

<section>
   <img src="./somewhere" alt = "something">
    <div>
          <h2>My Page</h2>
          <p> something </p>
     </div>
     <div>
      <button>first btn</button>
      <button> second btn </button>
     </div>
</section>

Answer №1

If you want to target the last child in a section using CSS, you can use either :last-of-type or :last-child. You can learn more about these selectors from the CSS Selector Reference.

section > div:last-child {
  background-color: orange;
}
<section>
  <img src="./somewhere" alt = "something">
  <div>
    <h2>My Page</h2>
    <p> something </p>
  </div>
  <div>
    <button>first btn</button>
    <button> second btn </button>
  </div>
</section>

Answer №2

To choose the second div within a section, simply utilize section div:nth-of-type(2)

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

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

Deactivate a chosen item following selection

Is there a way to deactivate a selectable element after it has been clicked in the scenario below? Additionally, I would like to modify its CSS style. $(function(){ $("#selectable").selectable({ stop: function() { var result = $( "#select-re ...

Font that has been downloaded is not showing up on the HTML document

I recently downloaded a new font and ensured the file location is correct, but for some reason it's not working: <style> @font-face { font-family:"myfont"; src: url('fonts/Helvetica85Heavy_22449.ttf'); } h1 { font-family: ...

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

Running a MySQL query within a WordPress post using shortcode? Keep it in the post and avoid sending it to the footer with

My MySQL code is functioning perfectly, and I have created a custom shortcode to embed the content within a post. However, I am facing an issue where the shortcode is executing below the footer. Initially, I suspected it was a problem with a plugin or them ...

The challenge of vertically aligning text in a dynamically generated div

Currently, I am in the process of developing a straightforward application that allows for the dynamic addition of students and teachers. I am dynamically adding divs with a click function. To these dynamically created divs, I have assigned the class "us ...

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

Navigate across list items using the tab key in Angular 7

Below is the sidenav menu snippet containing various items: <ul class="account-settings-container" *ngIf="isUserActive"> <li> <app-account-information></app-account-information> </li> <li> <app-theme-p ...

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...

Creating a function that counts the number of times a button is clicked

I want to have the "game" button appear after the user clicks the "next-btn" 2 times. Once the multiple choice test has been completed twice, I'd like the game button to show up and redirect the user to a separate HTML page called "agario.html." I&ap ...

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div: CodePen Example <html> <head> <!-- MULTIPLE SELECT DROPDOWNS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ ...

Angular not executing Jquery script in included HTML files

Underneath is a simple jquery code snippet: $(document).ready(function() { $("h2").click(function(){ alert("Hello world"); }) }); After clicking on any h2 tag in the website, an alert message will display. The code functions properl ...

Is there a way to customize the design of an HTML scrollbar to resemble the one often seen on Google search engine result pages

While casually browsing online, I stumbled upon something truly unique. The image below shows a Google search result in Firefox that I have never encountered before or since. This screenshot captured a search result that was scrollable within itself. Isn& ...

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution. The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 e ...