How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure:

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

How can I target and change the margin-left value of this second div using CSS?

<div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">

I have attempted to do so with the following CSS:

#my_id + .col-sm-1 .col-3-box{
    margin-left:370px!important;
}

However, this approach does not seem to work. Can you advise me on what I might be doing wrong in this case?

htmlcss

Answer №1

In case you are working with markup:

<div>
    <div class="col-sm-12">
        <input id="my_id">
    </div>
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

and applying this css:

.col-sm-12 + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

If your markup looks like this:

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

then use this css:

#my_id + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

Important: ensure there is no space between .col-sm-1.col-3-box.

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

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

javascriptjquerycss

Is there a way to use a less mixin or selector to adjust the position depending on the sibling

Currently, I am working on adjusting the position of multiple sibling divs depending on their order. Although they are all currently set to position: absolute, this may change. Each div is a few hundred pixels tall, but I want them to overlap in such a wa ...

htmlcssless

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Utilize CSS to create a column layout

I have some HTML output that I would like to style using CSS, but unfortunately I have no control over how the HTML is generated and cannot make any changes to it. Right now, I have a two-column layout set up here: http://jsfiddle.net/uvg6f3tr/ I'm ...

htmlcssmultiple-columns

Styling for older versions of Internet Explorer (IE10 and earlier)

Could it be true that IE 10, 9, and others no longer support conditional statements? Is it also accurate to say that JQuery does not support the browser object above version 1.9? I am facing an issue with CSS rendering differently in Chrome and IE. A Goog ...

javascriptjqueryhtmlcssinternet-explorer

Is there a way to use Selenium to perform testing on a web UI that generates XML content instead of HTML?

Utilizing Selenium for testing my Perl cgi script has been successful overall, but I've encountered a unique issue in one particular test case. In this scenario, the cgi script returns XML content to the web browser instead of the expected HTML conten ...

htmlxmlperlunit-testingselenium

The Lifecycle of an HTML Page

Trying to grasp the life cycle of an HTML page has been a challenge for me. Unable to find comprehensive resources online, I took matters into my own hands by experimenting with the f12 tool in Internet Explorer. Through these experiments, I have formulate ...

html

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Using html5, I am currently working with video and audio. I have encountered an issue where sometimes the video hangs even after its readyState === 4. The cause of this problem is unclear to me. I aim for a solution where if the video's readyState = ...

javascripthtmljqueryangularhtml5-video

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Currently, I am utilizing innerHTML to include certain elements and a wrapper around them. for (i = 0; i < arr.length; i++) { b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div> ...

javascripthtml

Top 10 SQL Query based on two specific columns

As a beginner programmer diving into the world of SQL, I am on a mission to create a table for my website that showcases the lowest 10 grades alongside student information. While I feel confident in most aspects of this task, I am struggling with crafting ...

phphtmlsqlsql-server

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

Ways to display and conceal menu depending on initial view and scrolling

On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...

javascriptjqueryhtmlcss

Header logo not showing up on webpage

While working on a website template for a friend, I encountered an issue when uploading the site. The logo image was displaying perfectly fine on my local drive, but once uploaded, it showed as a broken image icon on the live website. Here is the code sni ...

htmlcssweb

Enlarge the icon so that it is bigger than the text, but ensure that both the icon and

Can someone please help me figure out how to align the icon with the text on this button? Here is the current code I have: .btn { -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; font-family: 'Raleway', sans-serif; ...

htmlcss

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

As part of my role, I am tasked with transforming mock specs provided by our clients into custom web forms. Our application comes equipped with tools specifically developed to streamline this process. Recently, I was presented with a particularly intriguin ...

htmlcss

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

Implementing a click event to convert text to input in Angular 5

I'm struggling with setting values instead of just getting them. I want to switch from using divs to input fields and update the values when in "editMode". <div class="geim__sets"> <div *ngFor="let set of game.sets" class="geim__set"> ...

htmlangular

How can we activate navigation on a mobile browser?

I am currently working on a small HTML5/JavaScript website designed to be accessed by mobile browsers on devices such as Android and iPhone. I am utilizing the geolocation feature of HTML5 to obtain the user's current location, but my goal is to then ...

javascriptandroidhtmlgoogle-mapsnavigation

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types