CSS에서 "XYZ"에 대한 레이블을 선택하는 방법은 무엇입니까?

256

HTML :

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

CSS :

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

레이아웃 변경을 위해 'for'속성을 기반으로 레이블을 선택하고 싶습니다.

css css-selectors

— 카일
소스

496

label[for=email]CSS에서 선택자는 다음과 같습니다.

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

... 또는 DOM을 사용하는 JavaScript에서 :

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

... 또는 jQuery를 사용하는 JavaScript에서 :

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

그것은의 속성 선택 . 일부 브라우저 (예 : IE <8 버전)는 속성 선택기를 지원하지 않지만 최신 브라우저는 지원합니다. IE6 및 IE7과 같은 오래된 브라우저를 지원하려면 슬프게도 클래스 (잘 또는 다른 구조적 방법)를 사용해야합니다.

(템플릿 {t _your_email}이 필드를 필드로 채울 것이라고 가정합니다 id="email". 그렇지 않으면 클래스를 대신 사용하십시오.)

선택하는 속성 값이 CSS 식별자 규칙에 맞지 않는 경우 (예 : 공백이나 괄호가 있거나 숫자로 시작하는 등) 인용 부호가 필요합니다. 값:

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

— TJ 크라우 더
소스

조건부 의견을 사용하여 ie7 클래스로 변경하고 큰 답변을 주셔서 감사합니다!

— Kyle

이제 jQuery 문서는 단일 단어에 따옴표가 필요하지 않으므로 CSS와 다시 일치합니다 (이 점에서).

— TJ Crowder 2016 년

모든 사람에게 혼동을 피하기 위해 사이에 공백이 없어야합니다 (난 그냥이 나 자신 있었다) label과[for=email]

— paddotk

페이지에 <! DOCTYPE>이 선언되어 있으면 IE8은 특성 선택기를 지원합니다.

— ilinamorato

@TJCrowder 이해합니다. 방금 테스트했을 때 요점을 명확히했습니다.

— ilinamorato 2013 년

내용이 변수 인 경우 따옴표로 묶어야합니다. 그것은 나를 위해 일했다. 이처럼 :

itemSelected (id : 숫자) {
    console.log ( 'label contains', document.querySelector ( "label [for = '"+ id + "']"));
}

— 훌리오 세자르 브리토 고메스
소스