Revisions to Affecting parent element of :focus'd element (pure CSS+HTML preferred) [duplicate]

Updated with :has().

Source Link

edited Dec 7, 2022 at 13:29

Unfortunately css doesn't support parent selectors. :(
So the only way to do it is toYou can use javascript like the jQuery parent method.has():

Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject

div:has(input:focus), 
div:has(a:focus) {
    background: pink;
}

~~Unfortunately css doesn't support parent selectors. :( So the only way to do it is to use javascript like the [jQuery parent method][1].~~

Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject

Unfortunately css doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.

Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject

You can use has():

div:has(input:focus), 
div:has(a:focus) {
    background: pink;
}

~~Unfortunately css doesn't support parent selectors. :( So the only way to do it is to use javascript like the [jQuery parent method][1].~~

Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject

Add note about CSS Selectors Level 4 parent selectors

Source Link

edited Feb 11, 2013 at 3:10

Unfortunately css doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.

Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject

Source Link

created Feb 6, 2010 at 11:35

Unfortunately css doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.

Return to Answer