jquery addClass ignoriert?

[moO]

Hiho,

folgendes Problem:

für meine Inputs definiere ich folgende Stile:

/* standard */  
input[type=text]{ border: 1px solid black; }  
/* fokus */  
.hasFocus { border: 1px solid green; }  
/* leer */  
.emptyInput { border: 1px solid red; }

Per jquery möchte ich jetzt die border entsprechend anpassen, dazu nutze ich einfach das addClass:

$("#dasInputFeld").addClass("hasFocus");

bzw.

$("#dasInputFeld").addClass("emptyInput");

Firenug zeigt mir auch an, daß die Klassen genutzt werden, aber ich sehe immer noch die standardmäßg definierte Border.

Woran liegt das?

Danke schonmal :)

[ChrisB]

Hi,

/* standard */

input[type=text]{ border: 1px solid black; }
/* fokus /
.hasFocus { border: 1px solid green; }
/ leer */
.emptyInput { border: 1px solid red; }

  

> Firenug zeigt mir auch an, daß die Klassen genutzt werden, aber ich sehe immer noch die standardmäßg definierte Border.  
>   
> Woran liegt das?  
  
An der höheren Spezifität des ersten Selektors.  
<http://www.w3.org/TR/CSS21/cascade.html#specificity>  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[moO]

Hi,

/* standard */

input[type=text]{ border: 1px solid black; }
/* fokus /
.hasFocus { border: 1px solid green; }
/ leer */
.emptyInput { border: 1px solid red; }

>   
> > Firenug zeigt mir auch an, daß die Klassen genutzt werden, aber ich sehe immer noch die standardmäßg definierte Border.  
> >   
> > Woran liegt das?  
>   
> An der höheren Spezifität des ersten Selektors.  
> <http://www.w3.org/TR/CSS21/cascade.html#specificity>  
>   
> MfG ChrisB  
>   
>   
  
Hm, macht Sinn ;)  
  
Habe die Klassen jetzt so erweitert:  
  
`input.hasFocus { border: 1px solid green; }`{:.language-css}  
  
Das steigert die Spezifizität ausreichend um das gewünschte Ergebnis zu erzielen.  
  
Danke!

[Gunnar Bittersmann]

@@moO:

nuqneH

[…] um das gewünschte Ergebnis zu erzielen.

Als da wäre?

Wozu JavaScript/jQuery? Wozu eine Klasse "hasFocus"? Es gibt in CSS bereits die Pseudoklasse :focus. [CSS21 §5.11.3]

Auch für "emptyInput" ist in modernen Browsern überhaupt kein JavaScript/jQuery erforderlich; das erledigen das @required-Attribut [HTML5] und die Pseudoklasse :invalid [CSS3-UI]

Qapla'

[moO]

@@moO:

nuqneH

[…] um das gewünschte Ergebnis zu erzielen.

Als da wäre?

Wozu JavaScript/jQuery? Wozu eine Klasse "hasFocus"? Es gibt in CSS bereits die Pseudoklasse :focus. [CSS21 §5.11.3]

Auch für "emptyInput" ist in modernen Browsern überhaupt kein JavaScript/jQuery erforderlich; das erledigen das @required-Attribut [HTML5] und die Pseudoklasse :invalid [CSS3-UI]

Qapla'

Hmm, das sind ja wieder mal janz neue Ansätze hier...
Da beles ich mich mal, danke dafür!!!

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

... und die Pseudoklasse :invalid [CSS3-UI]

wie siehts denn da und für die anderen dort aufgeführten Pseudoklassen mit der Browserunterstützung aus?

Macht es schon Sinn, die Seite im Wiki zu ergänzen?

Matthias