[CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기

[CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기

 

1. 형제 선택자

 

태그의 형제 레벨에 해당하는 요소를 선택한다.

 

 

 자주 쓰이는 속성 선택자의 종류

 

label + input - label 태그 바로 뒤에오는 input 선택자

label ~ input - label 태그 뒤에 오는 모든 input 선택자

 

 

예제

 

- HTML

 

<div class="control-form">
	<label class="control-label" for="">라벨</label>
	<input class="control-input" type="text">
	<input class="control-input" type="text">
	<input class="control-input" type="text">
</div>

 

- CSS

 

.control-form .control-label {
	color: red;
}

/* control-label 클래스 바로 뒤에 있는 control-input 클래스에만 스타일 적용 */
.control-form .control-label + .control-input {
	border: 1px solid red;
}

/* control-label 클래스 뒤에 있는 모든 control-input 클래스에 스타일 적용 */
.control-form .control-label ~ .control-input {
	border-right: 4px solid green;
}

 

 

태그 + 태그,   태그 ~ 태그

 

 

 

예제 결과를 보면 알 수 있듯이 라벨(.control-label) 바로 뒤에오는 input 에게 border red 스타일이 적용되었고,

 

라벨(.control-label) 뒤에 오는 모든 input의 border-right에 4px 두께의 초록색 라인의 스타일이 적용된 것을 확인할 수 있다.

 

 

 

2. 속성 선택자

 

태그의 속성을 선택자로하여 다양하게 스타일을 지정할 수 있다.

 

 

 자주 쓰이는 속성 선택자의 종류

 

[속성] - a[href] {...}

[속성="값"] - input[type="checkbox"] {...}

[속성^="값"] - 특정 값으로 시작하는 속성에 스타일 적용하기 [id^=chk]

[속성$="값"] - 특정 값으로 끝나는 속성에 스타일 적용하기 img[src$=jpg]

 

 

예제

 

- HTML

 

<div>
	<ul>
		<li>
			<input type="checkbox" name="" id="chk1">
		</li>
		<li>
			<input type="checkbox" name="" id="chk2">
		</li>
		<li>
			<input type="checkbox" name="" id="chk3">
		</li>
		<li>
			<input type="checkbox" name="" id="chk4">
		</li>
	</ul>
</div>

 

- CSS

 

[id^="chk"] {
	display: inline-block;
	width: 40px;
	height: 40px;
}

▶inline-block 사용하는 이유

 

[속성^="값"]

 

 

 

 

3. 가상 클래스와 가상요소

 

 

요소의 우선순위 정의한다.

 

어떤 요소의 상태를 말하는 경우가 많다.

 

 

자주 사용되는 가상 클래스 선택자

 

:visited - 방문한 링크 스타일 (같은 링크에 모두 적용됨)

:hover - 마우스 커서를 올려 놓을때

:active - 누르고 있을 때

:focus - 커서가 위치했을때

:disabled - 사용 불가 상태 일때

:checked - 체크 상태 일때

:nth-child(n) - 요소의 앞에서 부터 순서를 지정하여 적용하기

:nth-last-child(n) - 요소의 뒤에서 부터 순서를 지정하여 적용하기

:first-child - 첫번째 요소 선택

:last-child - 마지막 요소 선택

:not() - 괄호 안의 조건을 제외하고

::before - 요소의 앞에

::after - 요소의 앞에

 

 

예제

 

다음과 같이 메뉴 리스트 예제로 가상 클래스를 사용해보자.

 

- HTML

 

<ul class="menu-list">
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
	<li>메뉴4</li>
	<li>메뉴5</li>
	<li>메뉴6</li>
	<li>메뉴7</li>
	<li>메뉴8</li>
	<li>메뉴9</li>
	<li>메뉴10</li>
</ul>

 

- CSS

 

.menu-list li {
	border: 1px solid blue;
}

 

먼저 기본적인 영역을 확인하기 위해 border 색상을 파란색으로 주었다.

 

 

:first-child  ,  :nth-child(n)

 

여기서 첫 번째 li 와 짝수번째 li 에 스타일을 다음과 같이 적용하였디.

 

.menu-list li {
	border: 1px solid blue;
}

/* .menu-list li:nth-child(1) 로도 사용 가능 */
.menu-list li:first-child {
	background-color: yellow;
}

/* nth-child(even) : 짝수, nth-child(odd) : 홀수 로도 사용 가능  */
.menu-list li:nth-child(2n) {
	background-color: pink;
}

 

 

 

 

 

::after ,  ::before

 

추가로 after 와 before 가상요소  자세히 살펴보자.

 

 

- HTML

 

<div class="tab-list">
	<button>탭1</button>
	<button>탭2</button>
	<button>탭3</button>
	<button>탭4</button>
</div>

 

- CSS

 

/*기본 탭의 형태를 만들기 위한 버튼 스타일*/
.tab-list {
	margin: 300px 0;
	overflow: hidden;
}
.tab-list button {
	float: left;
	border-radius: 0;
	border: 1px solid #ccc;
	background-color: #eee;
	width: 150px;
	height: 45px;
	border-right-style: 0;
}

/* 가상요소 */
.tab-list button::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background-color: red;
}
.tab-list button::after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-color: blue;
}

 

 

 

 

가상요소를 통해 "탭" 이라는 텍스트 앞에 ::before 로 선택한 요소의 스타일이 적용되고, "탭" 이라는 텍스트 뒤에는 ::after로 선택한 요소의 스타일이 적용되는 것을 알 수 있다.

 

왜 before 로 주어진 스타일이 왼쪽 상단, after는 왼쪽하단에 적용이 되었는지는 block 레벨에 대해 알아야 이해가 된다.

 

▶block에 관한 내용

 

 

 

그렇다면 위치를 "탭" 텍스트와 동일한 위치로 만들고 싶다면 position 속성과 left, top 속성을 이용해서 맞출 수 있다.

 

 

- CSS

 

/*기본 탭의 형태를 만들기 위한 버튼 스타일*/
.tab-list {
	margin: 300px 0;
	overflow: hidden;
}
.tab-list button {
	float: left;
	border-radius: 0;
	border: 1px solid #ccc;
	background-color: #eee;
	width: 150px;
	height: 45px;
	border-right-style: 0;
	/*추가*/
	position: relative;
}

/* 가상요소 */
.tab-list button::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background-color: red;
	/*추가*/
	position: absolute;
	left: 25px;
	top: 18px;
}
.tab-list button::after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-color: blue;
	/*추가*/
	position: absolute;
	left: 110px;
	top: 7px;
}