Utilizing the SVG element in combination with the :focus pseudo-class using the sibling

Recently, I came across the sibling combinator feature in CSS and I'm attempting to transfer some of my JavaScript functionality into CSS. However, I'm encountering some difficulties with this transition.

<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
</div>

I've managed to alter the color of my svg image using:

path{fill:#f00}

But, I wish to change the color only when an input field within .box is focused.

.box svg path~.box div input:focus{fill:#f00}

Given that they are not direct siblings, I have employed prefixes to place them on the same level.

Can you guide me on what might be going wrong here?

htmlcsssvg

Answer №1

Stated in reference here:

The ~ combinator differentiates two selectors and matches the second element only if it comes after the first, and both share a common parent.

Therefore, the elements involved must have the same parent. This distinction is important as it is not to be confused with "same ancestor". While .box is an ancestor of both path and input:focus, it is not their immediate parent.

Due to this requirement, specifying the entire CSS "path" on the right side is unnecessary. It also means that elements within svg cannot be paired with elements outside it.

Furthermore, the order is incorrect. If it worked at all, fill would be applied to input:focus.

Rearranging things to make it function properly and utilizing some other techniques results in something like this:

input {
  display:block;
}
.box input:focus ~ svg {
  fill:#f00;
}

<div class="box">
  <input type="text">
  <input type="text">
  <input type="text">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg>
</div>

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

How can I give focus to an input element within a React component without directly using a ref on the input tag?

I am struggling to maintain focus on my text input boxes after the component re-renders. While I know I can use a ref to apply focus to an <input> element (as mentioned in responses here), I face limitations when the <input> is nested within a ...

javascripthtmlreactjsfocushtml-input

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

react-webcam npm package for optimizing video size

In my React app, I'm utilizing the npm package react-webcam. The <Webcam /> component is enclosed within a div with a dimension of {width: 100vw, height 100vh} I aim for the video element to adjust to the parent div's size and cover 100% ...

javascriptcssreactjswebcam

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...

javascriptcssangularangular-cdkangular-cdk-drag-drop

I am having trouble with the Bootstrap 5 column not functioning properly within my design

Currently working on a project with Bootstrap, where I am trying to create a footer that looks like the one in the image below: https://i.stack.imgur.com/XIbDk.png Below is the HTML code snippet for my footer: <footer class="footer"> <div class ...

htmlcsstwitter-bootstrap

Nested divs in HTML

Why is the width and height of the div set to 0 when the display property is set to inline? <html> <head> <style> .c { width: 300px; height: 50px; margin:0px; padding:0px; } #a { display:inline;padding:0px; m ...

htmlcss

The carousel caption in Bootstrap 5 vanishes when viewing the website on a smaller device

Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Having trouble with the linear gradient color length in HTML?

I'm attempting to design a gradient background using HTML and CSS. The gradient I want should be red for the top 10% and green for the remaining 80%, similar to this example: https://i.sstatic.net/TlnIh.jpg To achieve this, I came up with the follo ...

csshtmllinear-gradients

Tips for achieving consistent text and image alignment through CSS styling

My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image. I am facing an issue when trying to position the image statically in a wa ...

htmlcsspositioning

Generating a file directory using the current operating system for Python [importing css files]

When trying to link CSS in my HTML while running a Django server, I encountered an issue. The problem arises when using backslashes (\) on Windows and forward slashes (/) on Linux. Is there a recommended way to adjust the path in base.html according ...

csslinuxdjangowindows

jQuery In-Place Bounce Effect

I'm looking for a solution to make my list item elements bounce in place without overlapping. Check out the JSFiddle I created to illustrate my issue: http://jsfiddle.net/RGvjj/ If anyone can provide guidance on why this is happening and how to fix ...

jqueryhtmlcssinlinebounce

Elements contained within the enclosing div will not be visible

I'm currently working on a responsive webpage, and I've encountered a new issue that I can't seem to resolve. I've wrapped three separate divs within a parent div, but for some unknown reason, the child divs are not displaying. Can some ...

htmlcss

What is the method for incorporating an image into drop-down menu choices utilizing only HTML and CSS?

Is there a way to use HTML and CSS to incorporate images into each option of a drop-down list? View example here ...

htmlcss

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Guide to eliminating the arrow from a dropdown menu in Bootstrap 4

I am working with Bootstrap 4 and attempting to eliminate the dropdown arrow in my design. Unfortunately, the solutions that were effective for Bootstrap 3 no longer apply. You can read more about this issue here. To see the problem in action, check out ...

csstwitter-bootstraptwitter-bootstrap-4

Ways to toggle the visibility of an element based on the condition of two other elements

I'm facing a challenging UI use-case that I just can't crack. I have 2 non-nested divs that are causing me trouble (not nesting is crucial here as it would have made things much simpler). Here is the structure of the divs: <div class="a"> ...

jqueryhtmlmouseeventjquery-hover

Struggling to design a responsive layout as the div on the right keeps overlapping the div on the left

I recently built a React component that consists of two columns. In the left column, there's a calendar while the right column contains some text along with an input and select field. However, I noticed that when I resize the window, the elements on ...

javascriptcssreactjs

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Utilizing jQuery to Retrieve Values from All Form Elements

Below is the provided HTML code snippet: <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' > <head> <title>HTML Form Builder</title> <link href='css/font1.css' rel='stylesheet' ...

javascripthtmljquery

Providing a BR tag with a distinctive on-screen look (prior to the break happening)

After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...

htmlcss