선택자 조합 예시
div.box{} /* class 속성값이 box인 div 태그 */
section#main /* id 속성값이 main인 section 태그 */
#main.box{} /* id 속성값이 main이고, class 속성이 box인 태그 */ div:hover button{} /* div 태그에 마우스를 올린(hover) 상태 일 때, 해당 div 태그 하위에 있는 button 선택 */
div:hover > button{}
/* 마우스 올렸을 때, 해당 div 태그와 자식 관계에 있는 button 태그 선택 */지금까지 내용 정리
-
선택자
선택자는 CSS 속성을 작용할 대상을 선택하는 문법 -
기본 선택자
2.1 전체 선택자 : 모두 태그를 선택자로 지정
2.2 태그 선택자 : 태그명으로 선택자를 지정
2.3 아이디 선택자 : id 속성값으로 선택자를 지정
2.4 클래스 선택자 : class 속성값으로 선택자를 지정
2.5 기본속성 선택자 : HTML 태그에서 사용할 수 있는 속성과 값으로 선택자 지정
2.6 문자열 속성 선택자 : 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정 -
조합 선택자
3.1 그룹 선택자 : 여러 선택자들, 기호로 구분해 선택자를 그룹으로 묶어 지정
3.2 자식 선택자 : 선택자 범위를 자식 관계를 제한하고, > 기호를 구분자로 사용
3.3 하위 선택자 : 선택자 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용
3.4 인접 형제 선택자 : 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고, + 기호를 구분자로 사용
3.5 일반 형제 선택자 : 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고 ,~ 기호를 구분자로 사용 -
가상 요소 선택자
존재한다고 가정하고 선택하는 방법
4.1 ::before 요소의 맨 앞 선택
4.2 ::after 요소의 맨 뒤 선택 -
가상 클래스 선택자
요소의 상태를 이용해 선택자를 지정하는 방법
5.1 링크 가상 클래스 선택자
:link링크를 한 번도 방문한 적 없는 상태
:visited링크를 한번 이상 방문한적 있는 상태
5.2 동적 가상 클래스 선택자
:hover: 마우스를 올린 상태
:active: 마우스로 클릭한 상태
5.3 입력 요소 가상 클래스 선택자
:focus: 입력 요소에 커서가 활성화된 상태
:checked: 체크박스 요소에 체크한 상태
:disabled: 상호작용 요소가 비활성화 된 상태
:enabled: 상호작용 요소가 활성화 된 상태
5.4 구조적 가상 클래스 선택자
:first-child,:last-child: 첫번째 자식 태그와 마지막 자식 태그
:nth-child(n),:nth-last-child(n): n번째 자식 태그와 끝에서 n번째 자식 태그
:nth-of-type(n),:nth-last-of-type(n): n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그
:first-of-type,:last-of-type: 부모의 첫번째 특정 자식 태그와 마지막 특정 자식 태그
코드 예시
- p 태그를 모두 선택
<style>
p{
color:red;
}
</style> - id 속성값이 title인 태그를 선택
<style>
#content{
color:red;
}
</style>
</head>
<body>
<p id = "content"> 적용할 텍스트 </p>
</body>- 클래스 속성값이 box이면서 id 속성값이 title인 태그를 선택
<style>
#title.box{
color:red;
}
</style>
</head>
<body>
<p id = "title" class = "box"> 적용할 텍스트 </p>
</body>- section 태그의 하위에 있는 모든 div 태그 선택
<style>
section div{
color:red;
}
</style>
</head>
<body>
<section>
<p> 내용 1</p>
<div> 내용 2</div>
<p> 내용 3</p>
<div> 내용 4</div>
</section>
</body>
- label 태그와 인접한 형제 관계인 input 태그 선택
<style>
label + input{
background-color: #e2e2e2;
}
</style>
</head>
<body>
<form action = # method = "get">
<label>
입력1
<input type = "text">
</label>
<input type = "text">
</form>
</body>
- 링크 대상 경로가 https://www.naver.com인 a 태그 하위에 있는 span 태그를 모두 선택
a [href = "https://www.naver.com"] span{}