2. 선택자

HTML 요소를 선택해서 꾸미려면, HTML 요소를 선택하는 방법을 알아야하는데 그 방법을 선택자(Selector)라고 합니다.

 

 

전체 선택자

• 모든 요소를 선택합니다.
• 전체 선택자는 브라우저 기본 스타일을 초기화 하려고 할 때 자주 사용합니다.
• 사용문법 -  * 

/* 모든 요소를 선택함. */
* {
  margin: 0;
  padding: 0;
}

 

 

타입 선택자

• 특정 태그 이름을 가진 모든 요소를 선택합니다.
• 사용문법 - tag명

/* 태그명이 h1인 요소를 모두 선택함. */
h1 {
  color: blue;
}

 

 

클래스 선택자

• 주어진 class명을 가진 모든 요소를 선택합니다.
• 웹 문서에서 복수의 태그에 사용이 가능합니다.
• 문법 - .class명

/* class에 title을 갖고 있는 모든 요소를 선택함. */
.title {
  color: blue;
}

 

 

ID 선택자

• id 속성값과 같은 요소를 선택합니다.
• 웹 문서에서 고유한 하나의 태그에만 사용해야 합니다.
• 문법 - #id명

/* id속성이 title인 요소를 선택함. */
#title {
  color: blue;
}

 

 

속성 선택자

• 주어진 속성을 가진 모든 요소를 검색합니다.
• 문법 - [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

/* <a>태그에 href 속성이 존재하는 모든 요소. 예) <a href="https://example.org">exam</a> */
a[href] {
  color: purple;
}

/* <a>태그에 href 속성이 "https://example.org" 해당 값과 일치하는 요소. */
a[href="https://example.org"] {
  color: green;
}

/* <a>태그의 href 속성에 "example" 문자열을 포함하는 요소. */
a[href*="example"] {
  font-size: 2em;
}

/* <a>태그의 href 속성이 "www"로 시작하는 요소. */
a[href^="www"] {
  font-style: italic;
}

/* <a>태그의 href 속성이 ".org"로 끝나는 요소. */
a[href$=".org"] {
  font-style: italic;
}

/* <a>태그의 class속성이 클래스 속성에 'logo'라는 단어가 포함 된 요소 */
a[class~="logo"] {
  padding: 2px;
}

 

 

그룹 선택자

• 선택자를 쉼표(,)로 구분하여 여러 선택자를 나열합니다.
• 문법 - 선택자1, 선택자2 { 스타일 규칙 }

h1, p {
  text-align: center;
}

 

 

자손 결합자

• 첫 번째 요소의 자손인 태그를 모두 선택합니다.
• 문법 - A B 

/* <div>태그 하위에 있는 모든 <span>요소 */
div span {
  color: blue;
}

 

 

자식 결합자

• 첫 번째 요소의 바로 아래 자식인 태그를 선택합니다.
• 문법 - A > B

/* <ul>태그의 바로 자식인 모든 <li>요소 */
ul > li {
  color: blue;
}

 

 

일반 형제 결합자

• 첫 번째 요소의 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 모두 선택합니다.
• 문법 - A ~ B

/* <p>태그의 뒤에(아래) 나오는 모든 <span>요소 */
p ~ span {
  color: blue;
}

 

 

인접 형제 결합자

• 첫 번째 요소의 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 처음 하나만 선택합니다.
• 문법 - A + B

/* <h2>태그 바로 뒤에 위치하는 <p>요소 */
h2 + p {
  color: blue;
}

 

 

의사 클래스

• 선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용합니다.
• 문법 - 선택자:의사클래스이름 {속성: 속성값;}

의사 클래스 종류

• :link - 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a> <area> <link> 중 방문하지 않은 모든 요소를 선택합니다.
• :visited - 사용자가 방문한 적이 있는 링크를 나타냅니다.
• :hover - 사용자의 마우스 포인터가 요소 위에 올라가 있으면 선택됩니다.
• :active - 사용자가 활성화한 요소(버튼 등)를 나타냅니다.
• :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
• :not - 포함된 요소를 제외시키겠다는 뜻입니다.

a:hover {
  color: orange;
}
input:focus {
  color: red;
}

 

 

의사 요소

• 해당 HTML 요소의 특정 부분만을 선택할 때 사용합니다.
• 문법 - 선택자::의사요소이름 {속성: 속성값;}

의사 클래스 종류

• ::first-letter - 텍스트의 첫 글자만을 선택합니다. 단, 블록 레벨 요소에만 사용할 수 있습니다.
• ::first-line - 텍스트의 첫 라인만을 선택합니다. 단, 블록 레벨 요소에만 사용할 수 있습니다.
• ::before - 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다.
• ::after - 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다.
• ::selection - 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다.

/* 모든 p 요소의 첫 번째 줄. */
p::first-line {
  color: blue;
}

/* 모든 p 요소의 바로 앞 */
p::before {
  content : '♥';
  color: pink;
}