티스토리 뷰
- CSS 선택자
1. 기본 선택자
2. 복합 선택자
3. 가상 클래스
4. 가상 요소 선택자
5. 속성
- 적용 파일
index.html
<body>
<ul>
<li class="c1">리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
</ul>
<div class="c1">div 태그</div>
<p id="i1">p 태그</p>
<span>span 태그</span>
</body>
1. 기본 선택자
1-1. 전체 선택자(Universal Selector)
- *(Asterisk) 를 지정
- 모든 요소를 선택한다.
* {
color: red;
}
1-2. 태그 선택자(Type Selector)
- 태그를 지정
- 지정한 요소를 선택
li{
color:red;
}
1-3. class 선택자(Class Selector)
- 클래스를 선택
.c1{
color:red;
}
1-4. id 선택자(Id Selector)
- id를 선택
#i1{
color:red;
}
2. 복합선택자
2-1. 일치 선택자(Basic Combinator)
- 선택자 1과 선택자 2를 동시에 만족하는 요소 선택.
li.c1{
color:red;
}
- 비교
li{
color:red;
}
2-2. 자식 선택자(CHild Combinator)
- 선택자의 자식 요소를 선택
ul > .c1{
color:red;
}
2-3. 하위(후손) 선택자(Descendant Combinator)
- 선택자의 하위 요소를 선택
- 띄어쓰기를 이용
ul li{
color:red;
}
2-4. 인접 형제 선택자(Adjacent Sibling Combinator)
- 선택자의 다음 형제 요소를 하나 선택
li.c1 + li{
color:red;
}
2-5. 일반 형제 선택자(General Sibling Combinator)
- 선택자의 다음 형제 요소 모두를 선택
li.c1 ~ li{
color:red;
}
3. 가상 클래스 선택자
- 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.
- 가상 클래스 목록
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
의사 클래스 - CSS: Cascading Style Sheets | MDN
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을
developer.mozilla.org
3-1. :hover
- 선택자 요소에 마우스 커서가 올라가 있는 동안 CSS를 적용
li.c1:hover{
color:red;
}
3-2. :active
- 선택자 요소에 마우스를 클릭하고 있는 동안 CSS를 적용
li.c1:active{
color:red;
}
3-3. :first-child
- 선택자가 형제 요소 중 첫째요소를 선택
li:first-child{
color:red;
}
3-4. :last-child
- 선태자가 형제 요소 중 마지막 요소를 선택
li:last-child{
color:red;
}
3-5. :nth-child(n)
- 선택자가 형제 요소 중 n번째인 요소를 선택
li:nth-child(2){ /* 두 번째 요소를 선택 */
color:red;
}
- 2n : 짝수 번째의 요소를 선택
- 2n+1 : 홀수 번째의 요소를 선택
- n+2 : 두 번째 요소부터 선택
3-6. 부정선택자 :not(요소)
- 괄호 안의 선택자가 아닌 요소를 선택
li:not(.c1){
color:red;
}
4. 가상 요소 선택자
4-1. ::before
- 선택자 요소의 내부 앞에 내용을 삽입
li.c1::before{
display:block;
content:"리스트 before"; /* 내용을 추가해 주어야 함! */
color:red;
}
4-2. ::after
- 선택자 요소의 내부 뒤에 내용을 삽입
li.c1::after{
display:block;
content:"리스트 before"; /* 내용을 추가해 주어야 함! */
color:red;
}
5. 속성 선택자
- index.html
<body>
<h2>속성 선택자</h2><br>
<input type="text" placeholder="입력" disabled>
<input type="submit" value="입력">
</body>
5-1. 속성 선택
- 속성을 포함하는 요소 선택
[disabled]{
background-color:greenyellow;
}
5-2. 속성 내용 일치 선택
- 속성을 포함하고 그 속성의 값이 일치하는 요소를 선택
[type="submit"]{
color:red;
}
- Total
- Today
- Yesterday
- 리액트
- javaserverpage
- 세션
- httpServletRequest
- el
- 서블릿
- script element
- html css
- Spring
- Binding
- 스프링
- CSS
- 미들웨어
- nodejs
- 제이쿼리
- JSP
- Redux
- HTML
- 내장객체
- CSS 속성
- 네트워크
- react
- Spring MVC
- Java Server Page
- Network
- FMT
- Session
- a 태그
- Servlet
- 서브넷팅
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |