PoiemaWeb CSS3 Selector
selector {Property: Property-value; another: declaration;}
/* 예시 */
h1 {font-weight: bold;}CSS에서 요소들에 스타일을 적용하기 위해서는 어떤 요소에 스타일을 적용할 것인지 명시해 주어야함 → Selector(선택자)
명시한 셀렉터 대해 뒤에 오는 선언 블록 속 선언들에 대해 스타일을 적용함
기본 셀렉터
- 전체 셀렉터
* {...}:*을 사용 - 태그 셀렉터
h1 {...}:태그 이름을 그대로 사용 - id 셀렉터
#id {...}:id어트리뷰트 값 앞에#를 붙여 사용 - 클래스 셀렉터
.class {...}:class어트리뷰트 값 앞에.을 붙여 사용 - 어트리뷰트 셀렉터
셀렉터[어트리뷰트] {...}:셀렉터중어트리뷰트를 가지는 요소(값 상관X)셀렉터[어트리뷰트="값"] {...}:셀렉터중어트리뷰트를 가지고값까지 일치하는 요소셀렉터[어트리뷰트~="값"] {...}:셀렉터중어트리뷰트를 가지고 공백으로 구분된값을 포함하는 요소
<head> <style> h1[title~="a"] { color: red; } </style> </head> <body> <h1 title="a"> 적용O </h1> <h1 title="ab"> X </h1> <h1 title="a-b"> X </h1> <h1 title="c a b"> 적용O </h1> </body>셀렉터[어트리뷰트|="값"] {...}:셀렉터중어트리뷰트를 가지고값과 일치하거나값-으로 시작하는 요소
<head> <style> h1[title|="a"] { color: red; } </style> </head> <body> <h1 title="a"> 적용O </h1> <h1 title="ab"> X </h1> <h1 title="a-b"> 적용O </h1> <h1 title="c a-b"> X </h1> </body>셀렉터[어트리뷰트^="값"] {...}:셀렉터중어트리뷰트를 가지고값으로 시작하는 요소셀렉터[어트리뷰트$="값"] {...}:셀렉터중어트리뷰트를 가지고값으로 끝나는 요소셀렉터[어트리뷰트*="값"] {...}:셀렉터중어트리뷰트를 가지고값을 포함하는 모든 요소
복합 셀렉터 (Combinator)
여기서부터 자식과 후손이란 말이 여러 번 나올텐데 내가 사용한 의미를 정리하면 다음과 같음
후손 : 내가 감싸고 있는 모든 요소들
자식 : 내가 감싸고 있는 요소들 중 가장 상위에 있는 요소들, 나의 바로 아래 요소
형제 : 나와 같은 위치에 있는 요소
<div> 형제 </div>
<div id="얘를 기준으로 생각했을 때">
<p> 자식+후손 </p>
<p>
자식+후손
<span>
후손
</span>
</p>
<b> 자식+후손 </b>
</div>
<div> 형제 </div>- 후손 셀렉터
셀렉터A 셀렉터B {}:셀렉터A의 모든 후손 중셀렉터B와 일치하는 모든 요소, 꼭 바로 아래 후손이 아니어도 됨
<head>
<style>
div p { color: red; }
</style>
</head>
<body>
<div>
<p> 적용O </p>
<span>
<p> 적용O </p>
</span>
</div>
<p> X </p>
</body>- 자식 셀렉터
셀렉터A > 셀렉터B {...}:셀렉터A의 자식 중셀렉터B와 일치하는 모든 요소
<head>
<style>
div p { color: red; }
</style>
</head>
<body>
<div>
<p> 적용O </p>
<span>
<p> X </p>
</span>
</div>
<p> X </p>
</body>- 형제 셀렉터
- 인접 형제 셀렉터
셀렉터A + 셀렉터B {...}:셀렉터A바로 뒤(같은 위치)의셀렉터B요소, 만약 다른 요소일 경우 선택되지 않음 - 일반 형제 셀렉터
셀렉터A ~ 셀렉터B {...}:셀렉터A뒤(같은 위치)의 모든셀렉터B요소, 다른 요소가 중간에 있어도 제외하고 모든셀렉터B요소 선택
- 인접 형제 셀렉터
가상 클래스 셀렉터 (Pseudo-Class Selector)
해당 요소가 특정 상태에 있을 때 적용되도록 함
selector:pseudo-class {...}
/*예시*/
h1:hover {color:red;}보통 위와 같은 형태로 사용
클래스가 따로 존재하지 않지만 가상의 클래스를 지정하여 선택한다고 해서 pseudo-class
그래서 . 아니고:을 이용
- 링크 셀렉터, 동적 셀렉터 pseudo-classes
:link: 방문하지 않은 링크:visited: 방문한 링크:hover: 마우스가 위에 있을 때:active: 클릭 됐을 때:focus: 포커스 됐을 때
- UI 요소 상태 셀렉터 pseudo-classes
:checked: 체크 되어 있을 때:enabled: 사용 가능:disabled: 사용 불가능
- 구조 가상 클래스 셀렉터 pseudo-classes
:first-child/:last-child: 모든 자식 요소 중 첫 번째/마지막 요소:nth-first-child(n)/:nth-last-child(n): 모든 자식 요소 중 앞/뒤에서n번째 요소,n을 이용한 다항식 형태 또는 숫자를 대입하여 사용:first-of-type/:last-of-type: 나를 포함하는 형제 요소들 중 첫 번째/마지막 요소:nth-first-of-type(n)/:nth-last-of-type(n): 나를 포함하는 형제 요소들 중 앞/뒤에서n번째 요소,n을 이용한 다항식 형태 또는 숫자를 대입하여 사용
- 부정 셀렉터
:not: 셀렉터를 제외한 모든 요소 - 정합성 체크 셀렉터 : 정합성 검증에 따라
input또는form요소 선택
보통 해당 태그에pattern이라는 어트리뷰트를 사용하여 검증:valid: 검증 성공:invalid: 검증 실패
<style>
input[type="text"]:valid {
background-color: greenyellow;
}
input[type="text"]:invalid {
background-color: red;
}
</style>
...
<input type="text" value="010-1111-2222" pattern="^\d{3}-\d{3,4}-\d{4}$" required>가상 요소 셀렉터 (Pseudo-Element Selector)
해당 요소의 특정 부분에 스타일을 적용할 때 사용
요소 전체에 모두 적용하는 것 X
셀렉터로 지정된 요소의 컨텐츠에 대해 특정 부분에 적용
selector::pseudo-element {...}
/*예시*/
h1::first-letter {font-weight: bold;}::을 사용
::first-letter: 콘텐츠 첫 글자::first-line: 콘텐츠 첫 줄, block 요소에만 적용::before/::after: 콘텐츠의 앞/뒤 공간,content프로퍼티와 주로 같이 사용
h1::before {
content: "앞에 들어감";
}::selection: 드래그 된 부분
308 Permanent Redirect