[CSS] selector / 기본 선택자

MDN Selector

selector 종류

Universal *
type Tag
ID #id
Class .class
State :
Attribute [ ]

하나의 문서에서는 하나의 id만 사용할 수 있으며, id는 중복될 수 없다.

selector 사용법

selector{
	property : value;
}

.box {
	width : 200px;
    hegith : 200px;
    color : #ffffff;
    font-size : 16px;
}

h1(선택자) / color(속성) / red(값)

선택자(selector) : 페이지 위에 있는 많은 요소들 중에 어떤 아이들을 선택할것인지 결정
속성(property) : 어떤 속성들을 꾸며줄지 결정
값(value) : 속성에 해당하는 값

전체 셀렉터 (Universal)

* { style properties }

전체 선택자(*)는 HTML 문서내의 모든 요소를 선택

*{
	color : blue;
}

태그 셀렉터 (Type Selector)

element { style properties }

문서 내에서 주어진 유형의 모든 요소를 선택

/* All <a> elements. */
a {
  color: red;
}

>> 모든 a태그에 적용

ID 셀렉터 (ID Selector)

선택자 앞에 #태그를 붙여 사용
하나의 문서에 반드시 id는 하나밖에 사용하지 못합니다.

#id_value { style properties }

/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}

클래스 셀렉터 (Class Selector)

.class_name { style properties }

클래스 속성(Attribute)의 값을 지정하여 일치하는 요소들을 선택
ID 셀렉터와 다르게 class 셀렉터는 중복될 수 있습니다.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

속성 선택자 (attribute selector)

주어진 특성의 존재 여부나 그 값에 따라 요소를 선택

• [attr]
  attr이라는 이름의 특성을 가진 요소를 선택합니다.

• [attr=value]
  attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.

• [attr~=value]
  attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.

• [attr|=value]
  attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.

• [attr^=value]
  attr이라는 특성값을 가지고 있으며, 첫 시작단어가 value라면 이 요소를 선택합니다.

• [attr$=value]
  attr이라는 특성값을 가지고 있으며, value 끝나면 요소를 선택합니다.

• [attr*=value]
  attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.

• [attr operator value i]
  괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

• [attr operator value s] Experimental
  괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

예시

• a[href] > href라는 이름의 특성을 가진 a태그만
  ( = 링크가 있는 것들만)

• a[href=”naver.com”] > href라는 특성값이 정확히naver.com 인 a태그
  ( = 링크 중 naver.com인 것만 )

• a[href^=”naver”] > href 라는 특성값이 naver로 시작하는 a태그
  ( = 링크가 naver로 시작하는 것만)

• a[href$=”.com”] > href 라는 특성값이 .com으로 끝나는 a태그
  ( = 링크가 .com으로 끝나는 것들만 )

예시

[class~=class_name] { style properties }

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

>>속성 선택자
class 특성에 logo라는 단어가 포함되어있는 a태그