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

Leverage the power of Web Components in Vue applications

Currently, I am attempting to reuse Web Components within a Vue Component. These Web Components utilize the template element for formatting output. However, when I insert them into the Vue Template, they are either removed from the DOM or compiled by Vue. ...

javascripthtmlvue.js

Utilizing Bootstrap for Centering Content Vertically and Horizontally

My login form is designed with a simple layout using Bootstrap 3.3.7 and a wrapper class div. However, when viewed on a full browser screen, the text boxes overlap the labels. How can I adjust it so that the default bootstrap behavior is applied to the for ...

htmlcsstwitter-bootstrap

Retain the contents of the shopping cart even when the page is refreshed

For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...

javascripthtmlcssajax

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

Moving the words from textArea to each 'ol' element using JavaScript

When a word is entered in the textarea, it should be assigned to a specific class within an 'ol' tag. Each subsequent word will be placed in the next class sequentially. If there are no more words, the remaining classes should remain empty. <! ...

javascripthtml

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

What does the HTML and JS code look like when using Next.Js?

Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...

javascripthtmlreactjssassnext.js

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with ...

jquerycssevents

Ways to enlarge the diameter of the inner circle

I've implemented some CSS with JQuery, as seen in this JSFiddle. However, I'm having trouble increasing the width and height of the green circle to be slightly larger than the gray circle (referred to as the main circle) which is positioned at a ...

jqueryhtmlcss

List of items:1. The first item is elevated in its position

Can anyone explain why the first li item is displaying higher than the rest when I assign an id or class to the div element? Take a look at the code snippet below: <div id="pickList"> <ul *ngFor="let channel of currentPickSelection"> ...

htmlcssangular

Error message: "Azure deployment encounters Vue CSS dependency missing issue"

I recently built a Vue app following this tutorial but without CRUD functionality: . The app was created using Vue CLI 4.3.1 with vue create. During local development, it runs smoothly with npm run serve and builds without any errors. Now, I'm atte ...

cssvue.jsvuejs2buildazure-devops

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

What are some tips for designing HTML email templates?

Check out this example of an HTML email <div style="width:650px;"> <div class="begining"> <p> Dear <span>' . $name . '</span><br/>Thank you for your booking </p> & ...

htmlcsshtml-email

Updating content in AngularJS based on the sidebar can be achieved by following these steps:

Yesterday, I posed a question about how to implement multiple views with Angular in order to have a header and sidebar. After receiving some helpful insights, I was able to make progress on creating a header and sidebar for my AngularJS App. You can view ...

javascripthtmlangularjsng-view

What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Hey there, I'm facing an issue with the Bootstrap navbar collapse button not working. I've tried everything, followed all the steps in a tutorial, but still can't get it to function properly without altering the Signup and Login buttons. Ca ...

htmlcssbootstrap-5

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate

React Nested Menu Selection

Having trouble displaying TextField values in my React app. Utilizing material UI and material-ui-phone-number packages. Noticed that values appear behind when clicking the flag due to zIndex issue. Looking for modifications only on dialog2.js For code ex ...

cssreactjsmaterial-uireact-hooksjss

The background image allows the top images and headers to overlay, while ensuring that the other images and headers remain below

As a novice in HTML and CSS, I'm facing a puzzling issue while learning at school. The first header and two images within the container where my background image is placed are overlapping the background image, creating a large gap. Strangely, the subs ...

htmlcss