css 선택자
Simple selectors =
select elements based on name
p {
text-align: center;
color: red;
}
id
#para1 {
text-align: center;
color: red;
}
class
.center {
text-align: center;
color: red;
}
Combinator selectors =
- descendant selector (space) : 자손(자식, 손자 모두) 선택
- child selector (>) : 직속 자식만 선택
- adjacent sibling selector (+) : 인접한 한명의 형제자매 선택
- general sibling selector (~) : 보통의 형제자매 선택
| Selector | Example | Example description |
|---|---|---|
| element element | div p | 요소 <div> 안에 있는 모든 <p> 요소 |
| element>element | div > p | 요소 <div> 안에 직접 종속되어 있는 모든 <p> 요소 |
| element+element | div + p | 요소 <div>에 제일 첫번째에 위치된 <p> 요소 |
| element1~element2 | p ~ ul | <p> 요소 앞에 오는 모든 <ul> 요소 |
css pseude-classes(pseude: 존재하지 않는)
selector:pseudo-class {
property: value;
}
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | active 링크를 선택하라 |
| :first-child | p:first-child | parent 의 첫번째 자식인 모든 p요소를 선택하라 |
| :last-child | p:last-child | parent 의 마지막 자식인 모든 p요소를 선택하라 |
| :focus | input:focus | focus 가 있는 input 요소를 선택하라 |
| :nth-child(n) | p:nth-child(2) | parent의 p요소의 모든 두번째 자식을 선택하라 |
| :nth-last-child(n) | p:nth-last-child(2) | parent의 p요소를 마지막에세부터 카운팅하여 두번째인 모든 자식을 선택하라 |
css pseude-elements
selector::pseudo-element {
property: value;
}
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | 모든 p요소 뒤에 삽입하라 |
| ::before | p::before | 모든 p요소 앞에 삽입하라 |
| ::first-letter | p::first-letter | 모든 p요소의 첫번째 단어를 선택하라 |
| ::first-line | p::first-line | 모든 p요소의 첫번째 줄을 선택하라 |
| ::marker | ::marker | 목록 항목의 요소를 선택하라 |
| ::selection | p::selection | 사용자가 선택한 요소의 일부를 선택하라 |
css attribute selector
a[target] {
background-color: yellow;
}
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | 타겟 속성이 있는 모든 요소들을 선택 |
| [attribute=value] | [target=”_blank”] | target=”_blank” 인 모든 요소를 선택 |
| [attribute~=value] | [title~=”flower”] | 스페이스로 구분된 단어 목록(그 중 하나는 “flower”)을 포함하는 타이틀 속성이 있는 모든 요소를 선택 |
| [attribute|=value] | [lang|=”en”] | en으로 시작하는 lang 속성 값을 가진 모든 요소를 선택 |
| [attribute^=value] | a[href^=”https”] | https로 시작하는 href 속성 값을 가진 모든 a 요소들을 선택 |
| [attribute$=value] | a[href$=”.pdf”] | .pdf로 시작하는 href 속성 값을 가진 모든 a 요소들을 선택 |
| [attribute*=value] | a[href*=”w3schools”] | 하위 문자열 “w3schools”를 포함하는 href 속성 값을 가진 모든 a 요소들을 선택 |
