Section 7: The World of CSS Selectors (2)
2022.05.02 08:29 PM ~ 당일 11:43 PM
Section 7: The World of CSS Selectors
＊ 글속 태그들 < >는 ( )로 대체
<< Attribute Selector (속성 선택자) >>
※ 어떠한 '주어진 속성'을 가진 '태그' 전체를 선택하는 것.
-> 1. 예시 :
※ 'type'이 "text"로 설정된 모든 'input' 태그들이 선택되고 스타일링 됨.
(ex: input[type="text"] {
width: 300px;
color: yellow;
}※ 잘 쓰지는 않지만, 몇가지 변형이 있음.
-"google"이라는 글씨를 포함한 href링크를 가진 모든 a 태그를 선택
(ex: a[href*="google"] {
color: white;
}
<< Pseudo Classes (가짜 클래스) >>
※ 선택된 태그 뒤에 ' :~ '를 붙여서 특정 상황에서만 CSS가 발동하게 하는 것.
- '~가 작동하면, ~상태가 되면 *을 하라.' 라는 것.
( :hover, :active, :first, :checked, :nth-of-type().....)
-> 1. ' :Hover' 예시 :
※ 마우스를 해당 태그에 올리면 발생하도록 하는 것.
(ex: .post button:hover {
color: red;
} )-'.post' 클래스를 가진 태그 안에 있는 button들에 마우스를 올리면 색상이 바뀜
-> 2. ' :active' 예시 :
※ 버튼을 클릭했을 때 (활성화시) 발생하도록 하는 것.(ex: .post button:active {
background-color: #f2f4f3;
color: #000;
} )
- '.post' 클래스를 가진 태그 안에 있는 button을 클릭하면 색상이 바뀜
-> 3. ' :nth-of-type(숫자) ' 예시 :
※ 같은 태그들 중 몇번째에 오는 것 or 매 몇번째 마다 오는 것을 선택하여
그것들만 스타일링 하는 것.(ex: .post:nth-of-type(2n) {
background-color: #8d99ae;
}
- '.post' 클래스를 가진 중 2의 배수 자리에 있는 것들만 색상을 바꿈
<< Pseudo Elements (가짜 요소들) >>
※ 선택한 요소의 '특정 부분'만 스타일링하게 해주는 선택자들
( ::after, ::before, ::first-letter, ::first-line, ::selection....)
-> 1. ' ::first-letter ' 예시:
※ 선택한 요소의 '제일 첫 글자'만 수정하게 해줌.-> 2. ' ::first-line ' 예시:
※ 선택한 요소의 '시작 첫 한줄'만 수정하게 해줌.-> 3. ' ::selection ' 예시:
※ 선택한 요소 속의 텍스트를 마우스로 '드래그'했을 때 색상 등을 수정하게 해줌.
<< THE CASCADE >>
※ 스타일 선언해주는 순서가 중요하다는 의미.
※ 충돌하는 두가지 스타일이 있는 경우, 나중에 선언된 것이 이긴다.
※ .css 파일을 여러개 import하는 경우에도 마찬가지.
<< SPECIFICITY (특이성) >>
※ 같은 요소에 적용 가능한 다수의 선언이 '충돌할 때',
브라우저가 어떤 것을 적용할지 결정하는 방법.※ 주어진 선택자가 얼마나 '구체적'인지 측정하고,
더 구체적인 선택자가 승리함.
- 아래의 순서대로 우선시 됨.
ID : 최우선 / CLASS & 속성 & Pseudo-class / 요소와 psudo-요소 선택자※ ' !important; '라는 것을 css 속성 뒤에 붙여서
특이성 순위를 무시하고 가장 최우선하게 할 수 있음.
(아주 특별한 상황에서만 쓸 것)
(ex: color: red; !important;)
<< Inheritance (상속) >>
※ 부모 태그에만 css를 적용하고, 하위 요소들은 건들지 않는다면,
그 하위요소들은 부모 태그에 적용된 css를 상속받음. (ex: 텍스트 색상)※ 상속받지 않는 요소들이 있음. input이라던가. 이런 것들은
따로 css 파일에서 속성 부여를 'inherit(상속한다)'로 지정하면 상속받음
