Attribut-Selektoren

gaby · #1 (**permalink**) 27.05.2010, 17:40

Hallo,

Ich möchte in folgendem Quellcode den 4. Radio-Button ausblenden, aber es gelingt mir nicht. Könnte mir bitte jemand weiterhelfen?

HTML und CSS sind valide.

Grüße
gaby

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

input[type="radio"]
[name="dauer"]
[value="4"] {
display: none;
}

</style>
</head>
<body>

<div>
<input type="radio" name="dauer" value="1" >1 Stunde  
<input type="radio" name="dauer" value="2" checked="checked">2 Stunden  
<input type="radio" name="dauer" value="3" >3 Stunden  
<input type="radio" name="dauer" value="4" >4 Stunden
</div>

</body>
</html>

gaby · #2 (**permalink**) 27.05.2010, 19:06

Da ja auch noch der zugehörige Text "4 Stunden" ausgeblendet werden soll, habe ich ihn nun mal testweise in ein span-Element gesetzt.
Funktioniert aber leider immer noch nicht.
Jetzt habe ich wirklich keine Idee mehr.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

input[type="radio"] [name="dauer"] [value="4"] {
display: none;
}

input[type="radio"] [name="dauer"] [value="4"] span {
display: none;
}

</style>
</head>
<body>

<div>
<input type="radio" name="dauer" value="1" >1 Stunde  
<input type="radio" name="dauer" value="2" checked="checked">2 Stunden  
<input type="radio" name="dauer" value="3" >3 Stunden  
<input type="radio" name="dauer" value="4" ><span>4 Stunden</span>
</div>

</body>
</html>

gato · #3 (**permalink**) 27.05.2010, 20:11

Das Leerzeichen verbindet Vor- und Nachfahren, entferne es und du hast einen Selektor der nur das gewünschte Element selektiert (das span-Element auch, das hat hier nichts zu suchen).

gaby · #4 (**permalink**) 27.05.2010, 21:37

Zitat:

Zitat von gato

Das Leerzeichen verbindet Vor- und Nachfahren, entferne es

*an_die_Stirn_klatsch*

Dankeschön!

Dennoch ist es seltsam, daß der Vali alles durchgewunken hat. Bei meiner Schreibweise

Code:

input[type="radio"] [name="dauer"] [value="4"] {
display: none;
}

wäre also [value="4"] ein Kindelement von [name="dauer"],
und dieses wiederum ein Kindelement von input[type="radio"]

Und da der Vali sich nicht rührt, heißt das, daß er diese Attribute fäschlicherweise als Elemente identifiziert hat?
Ein Bug im Validator?

Zitat:

und du hast einen Selektor der nur das gewünschte Element selektiert (das span-Element auch, das hat hier nichts zu suchen).

Der runde Radio-Button ist nun ausgeblendet, aber wie bekomme ich den Text? Der soll natürlich auch noch weg.

gato · #5 (**permalink**) 27.05.2010, 22:24

Zitat:

Zitat von gaby

Dennoch ist es seltsam, daß der Vali alles durchgewunken hat. Bei meiner Schreibweise

Code:

input[type="radio"] [name="dauer"] [value="4"] {
display: none;
}

wäre also [value="4"] ein Kindelement von [name="dauer"],
und dieses wiederum ein Kindelement von input[type="radio"]

Und da der Vali sich nicht rührt, heißt das, daß er diese Attribute fäschlicherweise als Elemente identifiziert hat?
Ein Bug im Validator?

Nein, nein. Selektoren kennen eigentlich nur Elemente und keine Attribute. [attr=wert] ist die Kurzform für *[attr=wert], du hattest also folgendes selektiert:

Ein Element mit Attribut "value", dessen Wert "4" ist und das Nachfahre eines Elements mit Attribut "name", dessen Wert "dauer" ist und welches wiederum Nachfahre eines input-Elements ist, dass das Attribut "type" mit dem Wert "radio" besitzt.

Kompliziert, aber wenn man ne Zeit lang darüber nachdenkt ist es nicht schwer.

Zitat:

Zitat von gaby

Der runde Radio-Button ist nun ausgeblendet, aber wie bekomme ich den Text? Der soll natürlich auch noch weg.

Zwei Tipps dazu: Mache dich mit dem label-Element vertraut und verstecke dieses anschließend mit Hilfe des Nachbarselektors (+).

gaby · #6 (**permalink**) 28.05.2010, 13:05

Es klappt.

Danke sehr!

Grüße
gaby

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Selektoren setzen	safari92	CSS	0	11.11.2010 15:37
Klassen/ID's vs. Selektoren	Cu Chullain	CSS	3	01.10.2009 14:44
[PHP] Funktion zum Optimieren von CSS	Floele	Serveradministration und serverseitige Scripte	2	13.08.2005 10:31
funktionieren attribut selektoren nicht im IE?	nice	CSS	3	28.03.2004 11:55
Attributabhängige Selektoren als Browserweiche	Plotti	CSS	11	04.09.2003 22:54