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

Using AJAX and PHP to dynamically fill HTML drop-down menus

Unable to load routes from ./app.js in the file ./src/routes/index.js

jQuery append() is ineffective

Flexbox functionality with a specific focus on Kindle Fire device compatibility

Dynamic HTML element

Testing a service resolution in a controller through unit testing

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Encase Regex Matches from the Inner Text of an Element in HTML Tags

retrieve JSON object from deferred response of AJAX request

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

Obtaining the following class name from elements

Javascript splice method mistakenly eliminating the incorrect elements

The announcement will not be made as a result of the utilization of a private name

Targeting an HTML form to the top frame

What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Challenges with implementing @Html.EditorForModel

Deactivate and circumvent Angular routing outside of the specified route URL

Tips for integrating reCaptcha with AJAX using the .load() function

What is the best way to display all values in the class when no selection is made in the drop-down menu?