Frage Input:Focus Selector

[Monjy]

Hallo zusammen,

ich habe eine Frage zu folgendem Code:

https://codepen.io/Monjy/pen/pppxdr

In diesem Beispiel wird der Rahmen von div.a4 verändert sobald ich das Input in div a3 fokussiere. Der selektor ist :
div.a3 input:focus ~ .a4 {border: 10px solid blue;
}

Welchen Selektor benötige ich wenn ich Input a3 anklicke und

A) div.a5 ansprechen/ändern will
B) div.a1 ansprechen/ändern will
C) div.b4 ansprechen/ändern will

Ich hoffe ihr könnt mir helfen.

Gruß Monjy

 

[Aaron3219]

B und C lautet die Antwort schonmal:
geht nicht, so wie du dir es vorstellst, da es in CSS nicht möglich ist, Elternelemente anzusprechen
:(

zu A sage ich:
logisches Denken ist gefragt:

div.a3 input:focus ~ .a4 > .a5

 

[basti1012]

oder halt mit javascript etwas nachhelfen

 

[Monjy]

B und C lautet die Antwort schonmal:
geht nicht, so wie du dir es vorstellst, da es in CSS nicht möglich ist, Elternelemente anzusprechen
:(

zu A sage ich:
logisches Denken ist gefragt:

div.a3 input:focus ~ .a4 > .a5

Vielen Dank für deine Antwort !

Logisches Denken stimmt schon :) Nur leider bin ich Anfänger und noch nicht so wirklich mit allen Möglichkeiten vertraut. Was geht was geht nicht ...

Logisch wäre für mich zb. dass ich wenn ich mit

div.a3 input:focus ~ .a4 > .a5

Div.a5 ändern kann , mit:

div.a3 input:focus ~ .a4 <.a3

ändern kann.

Oder kann ich in CSS immer nur auf Kindelemente zugreifen ?

 

[Aaron3219]

Ja.
Es gibt mit CSS (bis jetzt) keine Möglichkeit auf Elternelemente zuzugreifen.

 

[Aaron3219]

Es ist natürlich mit absolut positionierten inputs möglich, dazu müsste man aber die genaue Anwendung dieses Konstruktes wissen, da absolute Positionierungen ein ziemlich Heikles Thema sind. Man sollte schon genau wissen wie un warum man es benutzt.

Edit:
Mit Javadcript lässt sich sowas natürlich auch machen. Dann kannst du alles auch so lassen.

 

[Monjy]

Wie gesagt, ich bin noch Anfänger und möchte erstmal mehr know how in html und css aufbauen. Nebenbei beschäftige ich mich auch mit PHP und wollte daher nicht auch noch mit JS anfangen. Wobei ich immer wieder feststellen muss, dass man für viele Dinge nicht an JS vorbeikommt. Ich werde wohl demnächst anfangen mich einzulesen.

Aber nochmals vielen Dank für die Hilfe !

 

[basti1012]

ja javascript brauch man immer wieder .und bei deinen problem hier reicht sogar eine zeile javascript und schon kannst du das elternelement beeinflussen