[CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector

[CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector

---

✔️ 선택자란?

: 선택자란, style 을 적용하고자 하는 HTML 요소이다.

: 원하는 요소를 선택하고 사용되는 패턴이다.

 

📓 구문 형식

선택자 [,선택자] {속성 : 값; 속성 : 값 ...}

 

 

✔️ 다중 조건 선택자

1) 선택자 목록

: 선택자 목록 (,) 은 일치하는 모든 요소를 선택한다. (OR 연산)

/*OR 연산 선택자*/
label, span {color: blue; font-weight: bold;}

 

2) AND 연산 선택자

: 모든 조건을 만족하는 요소를 선택한다.

: 선택자 끼리 띄어쓰기 없이 붙여 쓴다.

💡 a1 a2 {} 

/*AND 연산 선택자*/
div.box {width: 300px; height: 50px; border: 3px dashed gray; }

 

3) 전체 선택자

: 전체 선택자(*) 는 HTML 문서 내의 모든 요소를 선택한다.

 

4) 태그 선택자

: 지정된 태그명을 가지는 요소를 선택한다.

💡 p { color : blue; }

/*태그선택자*/
p {background: yellow;}
label {color: blue; font-weight: bold;}

 

5) ID 선택자

: id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다.

: id 어트리뷰트 값은 절대 중복될 수 없다.

💡 #id_값 {}

/*id선택자*/
#box {width: 300px; padding: 10px; border: 3px dotted gray;}

 

 

✔️ 클래스 선택자 class Selector

: 클래스 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다.

: 중복이 가능! ✨ 하다.

💡 .class_값 {}

/*class선택자*/
.red {color: red;}
.underline {text-decoration: underline;}

 

 

✔️ 어트리뷰트 선택자 Attribute Selector

: 주어진 어트리뷰트의 존재 여부나 그 값에 따라 요소를 선택한다.

💡 [] 가로 안에 넣는다.
지정된 어트리뷰트 를 갖는 모든 요소를 선택한다!
ex) input [name="num"] : input 요소 중에 name 속성값이 num 인 모든 요소!!

/* name=subject 인 요소 */
input[name=subject] {background: yellow;}

/*name 속성을 가진 요소*/
input[name] {border: 1px solid blue;}

/*name 속성 값이 a로 시작하는 요소*/
input[name^=a] {border-right: 3px solid red;}

/*title 속성 값이 '버튼'으로 끝나는 요소 */
input[title$="버튼"] {background: green;}

/*name 속성 값에 x를 포함하는 모든 요소*/
input[name*="x"] {border-right: 3px solid orange;}

/*title 속성 값에 '내용'이라는 단어(띄어쓰기로 구분)가 존재하는 모든 요소 */
input[title~="내용"] {background: gray;}


/*lang 속성에 en과 일치하거나 en- 로 시작하는 경우*/
p[lang|="en"] {color: red;}