Jak wybrać etykietę = = XYZ w CSS?

256

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

Chcę wybrać etykietę na podstawie atrybutu „for”, aby wprowadzić zmiany w układzie.

Kyle
źródło

Odpowiedzi:

496

Selektor byłby label[for=email], więc w CSS:

label[for=email]
{
    /* ...definitions here... */
}

... lub w JavaScript za pomocą DOM:

var element = document.querySelector("label[for=email]");

... lub w JavaScript za pomocą jQuery:

var element = $("label[for=email]");

To selektor atrybutów . Zauważ, że niektóre przeglądarki (na przykład wersje IE <8) mogą nie obsługiwać selektorów atrybutów, ale nowsze. Aby obsługiwać starsze przeglądarki, takie jak IE6 i IE7, musiałbyś niestety użyć klasy (dobrze lub innej strukturalnej metody).

(Zakładam, że szablon {t _your_email}wypełni pole z id="email". Jeśli nie, użyj klasy.)

Zauważ, że jeśli wartość wybranego atrybutu nie jest zgodna z regułami dla identyfikatora CSS (na przykład, jeśli ma w nim spacje lub nawiasy, lub zaczyna się cyfrą itp.), Potrzebujesz cudzysłowów wokół wartość:

label[for="field[]"]
{
    /* ...definitions here... */
}

Mogą to być pojedyncze lub podwójne cudzysłowy .

TJ Crowder
źródło
Zamienię to na klasę dla ie7, używając komentarzy warunkowych, dzięki za świetną odpowiedź!
Kyle
A teraz dokumenty jQuery mówią, że nie potrzebujesz cudzysłowów dla pojedynczych słów, więc ponownie pasuje do CSS (pod tym względem).
TJ Crowder,
6
Aby uniknąć nieporozumień dla wszystkich (właśnie to miałem), nie może być odstępu między labeli[for=email]
paddotk
IE8 obsługuje selektory atrybutów, o ile strona ma zadeklarowany <! DOCTYPE>.
ilinamorato
1
@TJCrowder Rozumiem. Ja tylko wyjaśniłem tę kwestię, właśnie ją testowałem.
ilinamorato
0

Jeśli treść jest zmienną, konieczne będzie połączenie jej ze znakami cudzysłowu. To zadziałało dla mnie. Lubię to:

itemSelected (id: number) {
    console.log ('label zawiera', document.querySelector ("label [for = '" + id + "']"));
}
Julio Cesar Brito Gomes
źródło