A combinator is something that explains the relationship between the selectors.
combinator 은 셀렉터 사이의 관계를 설명한 어떤 것이다.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
CSS 셀렉터는 하나의 단순한 셀렉터보다 더많은 것을 포함할 수 있다. 단순한 셀렉터 사이에서 우리는 combinator를 포함할 수 있다.
css에는 4가지의 다른 combinator이 있다.
1. 셀렉터의 자손,후예
2. 셀렉터의 어린이들
3. 셀렉터의 형제자매와 인접한
4. 셀렉터 형제자매
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
descentant selector은 명시된 요소의 후예들의 모든 요소와 매칭한다.
다음의 따라오는 예제는 <div> 요소 안의 모든 <p> 요소를 선택한다.
Child Selector
The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element:
child selector은 명시된 요소의 자식의 모든요소를 선택한다.
다음의 예제는 <div>의 모든 자식 요소인 <p> 요소를 선택한다.
Adjacent Sibling Selector
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects all <p> elements that are placed immediately after <div> elements:
adjacent 형제 선택자는 명시된 요소의 형제자매와 인접한 모든 요소를 선택한다.
형재 요소는 같은 부모님을 가져야만 한다. 그리고, "adjacent"는 "즉각적으로 따라오는"을 의미한다.
다음의 예제는 <div>요소의 바로 다음의 위치된 모든<p> 요소를 선택한다.
General Sibling Selector
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements:
일반적인 형제자매 선택자는 명시된 요소의 모든 형제자매 요소를 선택한다.
다음의 예제는 <dvi> 요소의 모든 <p> 요소를 선택한다.
'영어공부' 카테고리의 다른 글
CSS Pseudo-elements (0) | 2020.01.20 |
---|---|
CSS Pseudo-classes (0) | 2020.01.20 |
CSS Layout - Horizontal & Vertical Align (0) | 2020.01.19 |
CSS Layout - display: inline-block (0) | 2020.01.17 |
CSS Layout - Overflow (0) | 2020.01.15 |