[css] css 선택자, 합성자 (Selector, combinator)
선택자
1. Universal selector (전체 선택자)
사용법: *
모든 html 요소들을 선택한다.
예시:
* {
margin: 0;
};
2. Type selector (타입 선택자)
사용법: html element 이름으로 선택
특정 html element 를 선택한다.
예시:
button {
width: 100px;
}
3. Class Selector (클래스 선택자)
사용법: 클래스 이름 앞에 . 을 붙여서 사용
특정 클래스 elements 를 선택한다.
예시:
.table {
width: 200px;
height: 200px;
};
4. ID Selector (아이디 선택자)
사용법: 아이디 앞에 # 을 붙여서 사용
특정 Id 의 elements 를 선택한다.
예시:
#my_id {
width: 200px;
};
5. Attribute Selector (속성 선택자)
사용법: element 의 속성과 속성 값을 이용해서 element 를 선택한다.
예시:
a[href^="www"] {
width: 200px;
}
해석: a 엘리먼트 중에 href 의 속성 값이 www 로 시작하는 모든 앨리먼트들의 width 를 200px 으로 만든다.
attribute selector 에 관한 자세한 정보는 아래 링크에
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Attribute selectors - CSS: Cascading Style Sheets | MDN
The CSS attribute selector matches elements based on the presence or value of a given attribute.
developer.mozilla.org
합성자 (Combinators)
모든 자식 엘리먼트들 중 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경
div p {
width: 100px;
}
해석 : div 의 모든 자식 노드들 (손자 노드, 증손자 노드 등 모든 자식 노드 포함) 중 p 에 select 되는 노드들의 width 를 100px 로 한다.
정확히 앞의 셀렉터에 선택된 엘리먼트로부터 1단계 밑 자식들 중에 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경
ul > li {
width: 50px;
};
해석: ul 의 바로 아래 자손들 중 li 에 해당하는 엘리먼트들의 width 를 50px 로 변경
앞의 셀렉터보다 순서상 뒤에 있는 형제 엘리먼트들 중에서 뒤의 셀렉터에 해당하는 엘리먼트들의 css 를 변경
.red_list ~ li {
width : 400px;
};
해석: red_list 라는 클래스를 가진 엘리먼트보다 뒤에 있는 엘리먼트들 중에서 li 에 해당하는 모든 엘리먼트들의 width 를 400px 로 변경
4. Adjacent sibling combinator
앞의 셀렉터와 바로 뒤에 붙어있는 형제, 두번째 셀렉터에 해당하는 엘리먼트들의 css 를 변경
div + p {
width: 100px;
};
div 엘리먼트 바로 뒤에 나오는 형제 p 엘리먼트의 css 를 변경한다.