How can I access the fourth div element within the initial row of a multirow div container?

My current HTML structure is causing me some confusion. I am trying to create a CSS selector for the element with the text "DESIRED ELEMENT":

 <div class="TopDiv">
      <div class="container">
           <div class="row">
                <div class="span2">
                     <strong>Text1</strong>
                </div>
                <div class="span3">Text2</div>
                <div class="span2">
                     <strong>Text3</strong>
                </div>
                <div class="span3">DESIRED ELEMENT</div>
           </div>
           <div class="row">
                <div class="span2">
                     <strong>Text4</strong>
                </div>
                <div class="span3">Text5</div>
                <div class="span2">
                     <strong>Text6</strong>
                </div>
                <div class="span3">
                     <div>Text7</div>
                     <div>Text8</div>
                     <div>Text9</div>
                     <div>Text10</div>
                     <div>Text11</div>
                     <div>Text12</div>
                     <div>Text13</div>
                </div>
           </div>
      </div>
 </div>

I am struggling to target the specific div that I need as I am unclear on using 'nth-child of type' or traversing through nested elements.

All I want is a simple and concise method to select the 4th child div of the first row after the container div.

csscss-selectorsselenium-webdriver

Answer №1

Is the selector dependent on the order of your elements?

Here is a possible solution:

.row:first-child > .span3:last-child

This will target the last element with the class .span3 that is a child of the first .row.

Check out the jsFiddle here.

If you need support for last-child in IE8 and earlier, consider using Selectivizr.

Another option that should work in IE7/IE8 is 

.row:first-child > .span3 ~ div.span3
.

Use this only if there are exactly two elements with the .span3 class inside a row.

View the jsFiddle here.

If it's not the last element but always the fourth, try using 

.row:first-child > div:nth-child(4)
.

See the jsFiddle here.

Answer №2

the fourth div element within the initial row following the container.

The equivalent CSS code would be:

following the container

.container >

within the first row

.row:first-child >

the fourth div element

div:nth-child(4)

thus, in a single line:

.container > .row:first-child > div:nth-child(4)

locate the container class and within its children, locate the first row class followed by the fourth div element.

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

Positioning icon/image beside the input box

Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...

htmlformscssiconsalignment

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...

cssbootstrap-4

Using $_POST method to navigate within the same web page

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...

phpjquerycsssqlajax

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

htmlcss

Having trouble running the testng.xml file using the command prompt window

Apologies for the repeated post, but I am struggling to resolve this issue. Despite my attempts to troubleshoot and follow various methods, I have been unable to successfully execute the testng.xml file in the command prompt window. Even after trying diffe ...

javaseleniumselenium-webdrivertestng

Align a series of divs in the center with variable width and height

I have a dilemma with my large div that contains multiple thumbnails. I am looking to center the thumbnails within the div and have the overall div centered on the page. Additionally, I want the width of the div to be flexible so that all thumbnails can be ...

csshtmlcss-floatcenter

What is the best way to make a span's background color stretch to 100% width?

Is there a way to make the background of a span element stretch to the full width of its parent container? Just to Clarify I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue. (di ...

htmlcss

The CSS and Javascript files are failing to load

My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders. I have attempted to rename the files to troubleshoot the issue. <head> <link rel=" ...

javascripthtmlcss

Encountering difficulties in accessing the Selenium Grid Hub URL/console via a browser client

These are the steps I followed to initiate the Selenium hub: hub.json file : { "port": 4441, "newSessionWaitTimeout": -1, "custom": {}, "capabilityMatcher":"org.openqa.grid.internal.utils.DefaultCapabilityMatcher", "throwOnCapabilityNotPresent": tru ...

seleniumselenium-webdrivergridwebdriverselenium-grid

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

The concept of min/max-width media query lacks grammatical coherence

I am struggling to grasp the concept of min-width and max-width media queries. If I were to create a media query, I would want it to look something like this (in pseudo-code).... if(screen.width < 420) { ApplyStyle(); } The idea of using terms l ...

cssresponsive-design

Ways to Design ASP.NET Buttons for Users with Disabilities

Recently, I attempted to style an asp button using CSS. The Button HTML: <asp:Button ID="btnClockin" runat="server" Text="Clock In" class="FullWidthButton" /> Here is the CSS code: .FullWidthButton {width:100%;} Everything was working fine until ...

asp.netcss

Is there a different way to manage multiple if and if-else conditions based on the presence of elements in Selenium testing?

While working on automating e2e automation cases, I encountered a problem with performance due to using multiple if conditions within a function for increased reusability. Does anyone have suggestions for alternative approaches to improve performance witho ...

javaseleniumselenium-webdriverautomated-refactoring

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along the x-axis. var mouseX; $(document).mousemove( function moveFunc(e) { mouseX = e.clientX; var timV = $("#deko_vid").get(0).duration; var valV = (timV*mouseX/$(do ...

javascriptjqueryhtmlcsshtml5-video

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

How can I modify the CSS styles for a custom jQuery widget?

I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this? <!doctype html> ...

jqueryhtmlcssjquery-ui

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

cssr-markdownhugoblogdown

designing icon buttons

I am interested in adding big buttons with icons to my website. I have images named largebut_hover.png, largebut.png, and icon.png. The icon image is supposed to be displayed inside the light grey background of largebut.png, and when hovering, it should sw ...

css

What are the advantages of using Selenium Edgedriver's Send Keys to select all and copy text?

Being a novice to using Selenium, I'm exploring this auxiliary library for the first time in VBA. I've opted to use the Web Driver for Microsoft Edge, and I'm encountering challenges with implementing send keys. Specifically, I am trying to ...

selenium-webdrivercopysendkeysselectallselenium-edgedriver