Styling the elements that are next to each other using CSS

Question

Styling the elements that are next to each other using CSS

Hey there, what if I have HTML elements structured like this:

<div>
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

I am looking to update the previous elements of those with the .check CSS property, for example changing Name to *Name with red color.

Can this be achieved through CSS alone, or would JavaScript need to be involved?

Open to any ideas or suggestions. Thank you!

javascript html jquery css

Answer 1

Answer №1

Here is a suggested solution with the following changes:

The input tags are no longer enclosed within their own div.
Position of input tag and the div containing label have been swapped as CSS can only move forward.

.container {
  display: flex;
  flex-direction: column-reverse;
}

input {
  width: 200px;
}

input.check+div {
  color: green;
}

<div>
  <div class="container">
    <input type="text" class="check">
    <div>Name</div>
  </div>
  <div class="container">
    <input type="number" class="check">
    <div>Age</div>
  </div>
  <div class="container">
    <input type="text">
    <div>address1</div>
  </div>
</div>

Answer 2

Here is a suggested solution with the following changes:

The input tags are no longer enclosed within their own div.
Position of input tag and the div containing label have been swapped as CSS can only move forward.

.container {
  display: flex;
  flex-direction: column-reverse;
}

input {
  width: 200px;
}

input.check+div {
  color: green;
}

<div>
  <div class="container">
    <input type="text" class="check">
    <div>Name</div>
  </div>
  <div class="container">
    <input type="number" class="check">
    <div>Age</div>
  </div>
  <div class="container">
    <input type="text">
    <div>address1</div>
  </div>
</div>

Answer 3

Answer №2

After considering Gerard's suggestion, I must admit it does seem like a solid idea that I would consider using if the need arises. However, an alternative approach could be to assign classes to the specific elements you wish to style with CSS, allowing for direct selection of those elements. If this is not suitable for your needs, you might also want to explore utilizing nth-child in the following manner:

<div class="my-class">
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

CSS

.my-class:nth-child(n) {
  color: red;
}

It's important to note that n represents the specific child number to which you intend to apply the styling, so depending on the number of elements within your parent element, you can adjust the value of n accordingly.

Answer 4

After considering Gerard's suggestion, I must admit it does seem like a solid idea that I would consider using if the need arises. However, an alternative approach could be to assign classes to the specific elements you wish to style with CSS, allowing for direct selection of those elements. If this is not suitable for your needs, you might also want to explore utilizing nth-child in the following manner:

<div class="my-class">
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

CSS

.my-class:nth-child(n) {
  color: red;
}

It's important to note that n represents the specific child number to which you intend to apply the styling, so depending on the number of elements within your parent element, you can adjust the value of n accordingly.

Styling the elements that are next to each other using CSS

Answer №1

Answer №2

Similar questions

Troubleshooting Problems with Node JS Express, Passport JS, and Authentication on Android Devices

What method is the most effective for extracting the first line of a file in Node.js quickly?

How can I target only one mapped item when using onClick in React/NextJS?

"Enhance Your Dining Experience with a Menu that Captiv

How can I vertically center a back button in jQuery Mobile?

"Cascading Style Sheets for Organizing Buttons in a Grid

What are the reasons behind the failure of this regex matching in Angular specifically on Safari browser?

Provide the identification number of a specific row within the modal

The background color of the columns is overwhelming

A warning is triggered when attempting to return a non-returning function from a Promise

Transferring JSON data using DWR (Direct Web Remoting)

Directive fails to trigger following modification of textarea model

Setting up webRTC and Express.js to function within the same domain requires proper configuration

Creating a Gradient Effect for Partial Next Slide on Slick Slider using Bootstrap 4

Are your Express routes failing to function properly?

Dynamic Vue2 input field names

Having trouble installing the 'ws' npm package on MacOS Big Sur?

Transforming a d3 line chart into a bar chart

Positioning the filters in jQuery Datatables

Is it better to have Angular and Laravel as separate applications or should Laravel serve the Angular app?