기존에 선택자의 요소에는 여러 가지가 있다고 배웠습니다.
오늘은 그 기본 선택자 외의 선택자들에 대해서 알아보겠습니다.
https://blue-dot.tistory.com/124
웹 CSS 입문 공부 12. 선택자, 선택자 우선순위
선택자란 선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 입니다. 무엇을 CSS로 꾸며줄 것인지 스타일을 입힐 대상 요소에 대한 것을 지정하는 것이에요. 선택자에는 종류가 여러가
blue-dot.tistory.com
1. 특성 선택자(속성 선택자)
특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택합니다.
속성 존재 여부
값에 따른 요소 선택
- 기호를 추가해서 요소를 선택할 수 있는 방식
[class * = ] 클래스 값에 “it”가 포함되는 요소를 선택하기
[class ^ = ] 클래스 값이 “it”로 시작하는 요소를 선택하기
[class $ = ] 클래스 값이 “it”로 끝나는 요소를 선택하기
즉 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택할 수 있으며 값의 포함 여부, 포함 위치 등을 통해서도 선택할 수 있습니다.
아래 예시를 같이 볼게요.
<style>
[href="https://www.naver.com/"]{ /*이 속성값을 가지고 있는 값만 적용*/
text-decoration: none; /*하이퍼링크 밑줄 없애기*/
color: olivedrab;
}
[href*="goo"]{ /*goo가 포함되는 링크만 적용 */
text-decoration: line-through; /*하이퍼링크 밑줄 없애기*/
color: blueviolet;
}
</style>
</head>
<body>
<div>
<h1> 링크들 </h1>
<a href="https://www.naver.com/">네이버 </a> <br>
<a href="https://www.google.com/">구글 </a> <br>
<h1> 텍스트들 </h1>
<p class="cute"> 스트레칭 많이 하기 </p>
<p class="cookie"> 하레하레에서 과자 사기 </p>
<p class="ride"> 집에 갈 때 자전거로 귀가하기 </p>
<p class="drink"> 오늘은 물 많이 마시기 </p>
</div>
</body>
2. 결합 선택자
자손 결합자
자손 결합자란 하위의 요소에 대해, 즉 결합된 코드에 대해 선택하는 것입니다.
div p { } div 요소 안에 위치하는 모든 p 요소를 선택합니다.
div > p { } 요소의 바로 아래에 위치하는 모든 p 요소를 선택합니다.
형제 결합자
두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.
h1 ~ p { }h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기
h1 + p { } h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기
결합 선택자는 여러 선택자를 결합하여 요소를 선택할 수 있으며, 상위 혹은 하위 중에서 특정 조건을 만족하는 요소를 선택할 수 있습니다.
body p{ /* body 에 포함된 모든 p들*/
color: pink;
}
결합을 하면 결국 하나의 선택자이기 때문에 선택자로 포함될 수 있습니다.
상위 > 하위 > 하위 에서 '상위 > 하위'의 결합자도 하나의 선택자가 되기 때문에
'상위> 하위' > 하위의 결합이 가능한 것입니다.
body > div > p{ /* body 에 포함된 모든 p들*/
color: red;
}
상위 요소 뒤의 하위 요소들 전부를 선택할 때의 예시는 다음과 같습니다.
h1 ~ p{ /*h1뒤에 있는 p들*/
background-color: peachpuff;
}
상기 코드에서 ~ 물결을 + 로 바꿀 경우 h1 뒤에 있는 p들에서 h1 바로 뒤에 있는 p로 바뀝니다.
h1 + p{ /*h1뒤에 있는 p들*/
background-color: peachpuff;
}
3. 의사 클래스
동적인 선택자로, 사용자와의 상호작용을 통해 요소가 어떠한 특정 상태가 되었을 때 요소를 선택하겠다는 의미입니다.
의사 클래스는 선택자에 추가하는 키워드입니다.
선택자 : 의사클래스 {
속성명 : 속성값 ;
}
사용할 수 있는 의사 클래스의 종류에 대해서 알아보겠습니다.
| hover | 마우스 포인터가 요소에 올라가 있다. |
| active | 사용자가 요소를 활성화했다. (예를 들면, 마우스로 누르기와 같은) |
| focus | 요소가 포커스를 받고 있다. |
| disabled | 비활성 상태의 요소이다. |
| nth-child() | 형제 사이에서의 순서에 따라 요소를 선택한다. |
위 종류들의 예제를 하나씩 직접 해볼게요.
hover, active, focus
각 사용에 대해서는 주석으로 기재해두었습니다.
button:hover { /*기본 스타일이 있을 때 변화를 주어야 하므로 스타일이 있을 때 적용이 되어야한다. */
background-color: blueviolet;
cursor: pointer; /*마우스 커서가 손 모양으로 바뀐다.*/
}
button:active { /*마우스로 클릭되어 있는 상태. active는 hover를 포함하고 있는 상태.*/
color: cornsilk;
font-size: 0.6em;
}
input:focus{
background-color:pink; /*보더와 별개로 입력필드 포커스 시 생성되는 진한 외곽선이 생긴다.*/
outline: none; /*outline을 없애준다.*/
}
실행 화면은 다음과 같습니다.
disabled
요소를 비활성화된 상태로 만듭니다.
input:disabled{
display: none;
}
</style>
</head>
<body>
<h2> 가장 먹고 싶은 음식은? </h2>
<input type="text" placeholder="음식명을 입력하세요." disabled> /*불속성*/
<button>등록</button>
nth-child()
특정 요소를 선택합니다.
<style>
li:nth-child(2){
color:brown;
}
</style>
<body>
<ui>
<li>샌드위치</li>
<li>초코우유</li>
<li>생크림케이크</li>
</ui>
</body>
사용이 가능한 의사 클래스들은 무궁무진하므로 필요한 클래스나 어떤 의사 클래스가 있는지 확인하고 싶다면 MDN 페이지를 참고하면 좋습니다.
의사 클래스 - CSS: Cascading Style Sheets | MDN (mozilla.org)
의사 클래스 - CSS: Cascading Style Sheets | MDN
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을
developer.mozilla.org
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 CSS 입문 공부 19. 미디어 쿼리, 변형과 전환, 애니메이션animation, 애니메이션으로 공 튀기기 (1) | 2022.11.14 |
|---|---|
| 웹 CSS 입문 공부 18. 상속, 공용키워드, z-index (0) | 2022.11.14 |
| 웹 CSS 입문 공부 16. flexbox 각 속성들 (예제 작성중) (0) | 2022.11.14 |
| 웹 CSS 입문 공부 15. float, position 포지션, 레이아웃 flexbox (0) | 2022.11.14 |
| 웹 CSS 입문 공부 14. 요소 유형 display & borde, 박스 모델 Box-Model (0) | 2022.11.11 |