Trying to focus on an input within a span element is not functional

Encountered a puzzling issue where changing the color of a label when the input field is in focus is easy, except when the input is wrapped within a span.

Pulling my hair out trying to figure this one. Any insights?

Visit Codepen
<div class="input_contact">
    <input id="field_1">
    <label for="field_1">Works</label>
</div>    
<div class="input_contact">
    <span><input class="input_field_contact"></span>
    <label class="input_label_contact">Doesn't Work *</label>
</div>
label{
  color: blue;
}
input:focus + label{
  color: red;
}

Answer №1

If the elements are not siblings, using "+" is not an option.

Why do you feel the need to enclose your input in a span? In my experience creating countless forms, I have always kept labels and inputs as siblings.

If you share the reasoning behind your request, we may be able to offer assistance.

Answer №2

+ used in CSS represents the adjacent sibling selector, indicating elements that are immediately following and at the same level in the Document Object Model (DOM). Is your second <input> directly next to its corresponding <label>? No, the second <input> is enclosed within a <span>, making the <span> itself the sibling of the associated <label>.

You can either remove the <input> from the <span> or keep it inside the <span>. By doing so, your CSS selector input:focus + label will function as intended.

It seems like you may be attempting to execute DOM traversal using a parent-child relationship in your CSS selector, even though it is not currently supported in CSS. This method could potentially result in inefficiencies. However, technology continues to advance, so these features might become available in the future.

Answer №3

As per information on Wikipedia:

Limitation in Selectors

CSS does not provide a way to target a parent or ancestor element based on specific criteria. More advanced selector systems like XPath could allow for more intricate styling options. However, the CSS Working Group has rejected proposals for parent selectors mainly due to concerns about browser performance and rendering issues.

In future searches on SO, this limitation may also be known as an ancestor selector.

The Selectors Level 4 Spec introduces the concept of selecting the subject within a selector:

The subject can be explicitly marked by adding a dollar sign ($) before one of the compound selectors. While the structure remains the same with or without the dollar sign, designating the subject can alter which part of the selector is considered the subject in that structure.

For instance:

An example of a selector targeting a unique child list item LI within an ordered list OL:

OL > LI:only-child

Alternatively, a selector focusing on an ordered list OL with a sole child, where the child is a LI:

$OL > LI:only-child

Both selectors represent similar structures, but the subjects they address are different.

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

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

problem with html tags

I've been attempting to customize an input field using inline styles, but I'm running into issues. Here's what I tried: <div class="row vh-md-100"> <div class="col-md-7 my-md-auto text-center text-md-left"> ...

Resizing images using a dynamic frame size

I am in need of some assistance as I am currently facing a roadblock. My goal is to develop a picture framing tool for photos where users can specify the size of their photo, choose a colored cardboard mount, and select a frame type. My client has requeste ...

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

Safari has a unique feature where margins are not factored into the scroll width calculation

I am facing an issue with a container that scrolls horizontally. Inside this container, there are multiple items and I have added a margin to the last item on the right. However, in all browsers except for Safari, the margin is included in the scroll width ...

Can someone help me transform this LESS code into SCSS?

Currently, I am working on adapting a theme from [www.bootswatch.com][1] that is originally in less format to scss for my rails application. Although I am not well-versed in either SCSS or LESS, I have been researching the variances and have identified so ...

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png Although I have made some progress, I'm struggling to add a border outline. H ...

Having trouble aligning page in the center with flexbox and styled components

Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips? Let me share with you my Blog Component import ReactMarkdown from 'react-markdown' impor ...

Utilize Bootstrap 4 to seamlessly switch between nav-pills for larger screens and navbar-nav for smaller screens

On larger screens, I prefer the appearance of the nav pills. However, once the collapse button appears, I would like the menu to stack and resemble the image provided instead of the pills. Do I require custom CSS to achieve this? <div id="menu" class=" ...

Having trouble with JQuery Draggable in FireFox only working in an iFrame? Learn how to set the ViewPort to fix

Having trouble with jQuery UI Draggable in FireFox 33.0.2: I followed the example code, but it doesn't seem to be working. The scripts are running, CSS classes are added, event bindings are in place, but dragging won't work. I noticed that when ...

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Currently, I am using the open source project openhtmltopdf but I have encountered a certain issue. Within a div-element, I have a p-tag with text-align: right styling. The text is aligned correctly to the right until there is a line break due to the widt ...

Incorrect rendering of the <li> tag

I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...

Having trouble getting CSS absolute and relative positioning to work with my div slider carousel

I'm currently working on creating a slider carousel using VUE, where the CSS classes (3 divs) are looped through. However, I am facing an issue where every time a div fades out, the next slider creates a duplicate slider at the bottom, resulting in tw ...

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

Unable to show the table row color using Angular in Internet Explorer

I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...