CSS - 가상 선택자

---

 

 

CSS 가상 선택자 

 가상 클래스 선택자 

- 선택자 뒤에 : 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. 

• :link - 방문한 적이 없는 링크 
• :visited - 방문한 적이 있는 링크 
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때 
• :focus - 포커스 되었을 때 
• :first - 첫 번째 요소 
• :last - 마지막 요소 
• :first-child - 첫번째 자식 요소 
• :last-child - 마지막 자식 요소 (자식 요소를 부모 요소로 감싸주어야만 마지막 자식요소가 선택된다!)
• :nth-child() - n번째 자식 요소 
• :nth-of-type() - 형제 그룹 안에서 위치를 기반으로 형제 요소 선택 
• :only-of-type() - 동일한 유형의 형제가 없는 유일하게 사용된 태그 선택 
• :not() - 부정 선택 

 

 

 :nth-child() 

- 형제 사이에서의 순서에 따라 요소를 선택할 수 있다.

• odd : 홀수번째 
• even : 짝수번째

/* 2번째 li */
li:nth-child(2) {
  color: lime;
}

/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}

/* 2n+1번째 li */
li:nth-child(2n+1) {
  color: lime;
}

 

 

 :not() 

- 부정 선택자 

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}

 

 

 :root 

- 문서의 가장 상위 요소를 선택한다. = HTML

- 전역 변수를 선언할 때 사용한다.

※ 전역 변수 : 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수이다. 

- 하이픈(-)이 두 개 붙는 형식이다. 

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

 

 

 가상 요소 

 :: 

- 선택자로 선택한 요소의 뒤에 붙여 표기하는 키워드이다. 

- 특정 요소의 일부분에만 스타일을 입힐 수 있다. 

- HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가할 수도 있다. 

• ::before - 요소의 앞에 새 컨텐츠를 추가한다. 
• ::after - 요소의 뒤에 새 컨텐츠를 추가한다. 
• ::selection - 마우스 드래그로 선택한 텍스트 콘텐츠 영역을 선택한다. 
• :: marker - 목록 아이템 앞에 붙는 마커를 선택한다. 
• ::first-letter - 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 첫 글자를 선택한다. 
• ::first-line - 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 첫 줄을 선택한다. 

- 콜론(:)을 하나만 표기해도 작동되지만 가상 클래스와 가상 요소 구분을 위해 2개를 연달아 붙이는 것이 표준 표기 방법이다. 

 

 

 ::before  /  ::after 

- 선택한 요소에 자식을 생성한다. 

- content 속성과 짝을 지어 요소 앞/뒤에 장식용 콘텐츠를 추가할 때 사용한다. 

- 빈 태그(img, br, input)에는 적용할 수 없다. 

p::before {
  content : '♥';
  color: pink;
}

p::after {
    content: '!';
    color: royalblue
}

적용 결과

 

 

 ::placeholder 

- 자리 표시자를 선택한다.

- 자리 표시자는 input, textarea 요소에 정보를 제공한다.

✏ 로그인 창에서 아이디와 비밀번호 자리를 표시해 주는 문구나, 게시글 작성 시 '내용을 입력하세요.'와 같은 짧은 도움말이라고 생각하면 된다. 

 

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다 !