14. 선택자2(특성 선택자와 결합자)

4647 단어 htmlcsshtmlcss

선택자의 종류

  • 기본 선택자
  • 그룹 선택자
  • 특성 선택자
  • 결합 선택자
  • 의사 클래스
  • 의사 요소

=> 특성 선택자, 결합 선택자에 대해 알아보겠습니다.

특성 선택자 1. 컨셉

특성 선택자(속성 선택자)는 주어진 속성의 조냊 여부나 그 값에 따라 요소를 선택한다.

[class]{
	background-color: tomato;
}
[class="item"]{
	background-color: tomato;
}

=> 클래스 속성을 가지고 있는 요소를 선택하기 (상단)
=> 클래스가 "item"인 요소를 선택하기(하단)

특성 선택자 2. 값 확인

기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

[class *= "it"]{color:white;}
[class ^= "it"]{color:white;}
[class $= "it"]{color:white;}

=> 클래스 값에 "it"가 포함되는 요소를 선택하기 (상)
=> 클래스 값이 "it"로 시작하는 요소를 선택하기 (중)
=> 클래스 값에 "it"로 끝나는 요소를 선택하기 (하)

실습

<body>
<h1>선택자 연습하기</h1>
    <p>1번 문단입니다 그냥 태그</p>
    <p class="text">2번 문단입니다 클래스 있음</p>
    <p id="unique">3번 문단입니다 아이디 있음</p>
    <p class="text">4번 문단입니다 클래스 있음</p>
    <p>5번 문단입니다 <span>스판 있은</span>태그</p>
</body>

[class] {color:blue;}

클래스라는 속성을 가지고 있는 요소만 색상이 바뀐다.

[class] {
	color: blue;
}

[id] {color: brown;}

[id] {
	color: brown;
}

[class *="t" {color:blue;}

[class*="t"] {
	color: blue;
}

[백준] 오민식의 고민 : 벨만-포드
[백준 C++] 8981 입력숫자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage