css 선택자(selector)

선택자(selector)

css 선택자(selector)

전체 선택자

전체 선택자는 HTML페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다.
보통 기본적으로 사용할때 각 태그들이 가지고 있는 속성값들을 초기화 시킬때 사용합니다.

* {
    margin: 0; 
    text-decoration: none;
}

태그 선택자

태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자입니다.

p {
    color: #000;
}

클래스 선택자

클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택합니다.

이때 선택하려는 속성값 앞에 마치표를 추가해서 작성하며, class가 같은 경우 같은 스타일 적용되기 때문에 사용시 주의

.title {
    color: #fff;
}

 

ID 선택자

id 선택자는 속성값 앞에 #을 추가해서 작성합니다. 속성값 앞에 추가하는게 다를 뿐 class선택자와 유사합니다.

• 한 페이지 내에서 여러번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고,
  유일하게 적용될 스타일은 id선택자를 사용하는 것이 좋습니다.
• id 선택자의 우선순위가 클래스 선택자의 우선순위보다 높습니다.
  우선으로 적용되어야 할 스타일을 id 선택자를 사용하여 정의하는 것이 좋습니다.

#title {
    color: #fff;
}

 

복합 선택자(Combinator)

복합 선택자는 두개 이상의 선택자 요소가 모인 선택자입니다.
태그들이 포함 관계를 가질 때 포함하는 요소를 부모요소, 포함되는 요소를 자식 요소라고 합니다.

하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)

하위 선택자는 부모 요소에 포함된 '모든' 하위 요소에 스타일을 적용합니다. 하지만 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다.

// 하위 선택자
ul li {
    margin-right: 20px;
}

//자식 선택자
ul>li {
    margin-right: 20px;
}

인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 경우에만 스타일을 적용합니다.

하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다

// 인접 형제 선택자
ul+li {
    margin-right: 20px;
}

//일반 형제 선택자
ul~li {
    margin-right: 20px;
}

가상 클래스 선택자(Pseudo-Classes)

가상 클래스는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말합니다

링크 선택자(The link pseudo-classes)와 동적 선택자(The action pseudo-classes)

E:link // 방문하지 않은 링크 E를 선택합니다.

E:visited // 방문한 링크 E를 선택합니다.

E:active // 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택합니다.

E:hover // 요소에 마우스가 올라가 있는 동안 E를 선택합니다.

E:focus // 요소에 포커스가 머물러 있는 동안 E를 선택합니다.

 

• :link 와 :visited는 문서 안의 링크와 관련된 선택자입니다.
• :active 선택자는 해당 요소가 활성화된 상태를 선택합니다. 링크요소가 선택된 경우로 예를 들 수 있습니다.
• :hover선택자는 마우스 포인터가 해당 요소 위에 올라가 있는 상태를 선택합니다. 흑히 말하는 롤오버 효과(rollover)를 만드는 선택자입니다.
• :focus 선택자는 해당 요소에 초점이 맞춰있는 상태를 선택합니다. 초점이 맞춰졌다는 것은 텍스트 필드 안에 커서가 놓여진 것과 같은 상태를 말합니다.

 

구조적 가상 클래스 선택자(Structural pseudo-classes)

구조적 가상 클래스 선택자는 위치를 기준으로 삼습니다. 그래서 요소가 몇번째에 있느냐에 따라 스타일을 다르게 지정할 수 있게 해줍니다.

E:root // 문서의 최상위 요소(HTMl)를 선택합니다.

E:nth-child(n) // 앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택합니다.(E 아닌 요소의 순서가 계산에 포함)

E:nth-last-child(n) // 뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택합니다.(E 아닌 요소의 순서가 계산에 포함)

E:nth-of-type(n) // E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택합니다.(E 요소의 순서만 계산에 포함)

E:nth-last-of-type(n) // E 요소 중 끝으로부터 순서가 일치하는 E요소를 선택합니다.(E 요소의 순서만 계산에 포함)

E:first-child // 첫번째 등장하는 요소가 E라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)

E:last-child // 마지막에 등장하는 요소가 E라면 선택합니다.(E 아닌 요소의 순서가 계산에 포함)

E:first-of-type // E 요소 중 첫번째 E를 선택합니다.(E 요소의 순서만 계산에 포함)

E:last-of-type // E 요소 중 마지막 E를 선택합니다.(E 요소의 순만 계산에 포함)

E:only-child // E 요소가 유일한 자식이면 선택합니다.(E 아닌 요소가 하나라도 포함되면 선택하지 않습니다)

E:only-of-type // E 요소가 유일한 타입이면 선택합니다.(E 아닌 요소가 포함되어도 E 타입이 유일하면 선택합니다)

E:empty //텍스트 및 공백을 포함하여 자식요소가 없는 E를 선택합니다.

가상 엘리먼트 선택자(Pseudo-Elements)

가상 요소를 사용하여 어떤 요소(element)의 앞뒤에 텍스트나 그림을 추가할 수 있습니다.

 

• E::before : E 요소의 시작 지점에 생성된 요소를 선택합니다.
• E::after : E 요소의 끝 지점에 생성된 요소를 선택합니다.

 

E {
    position: relative;
}

E::before {
    content: "";
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #fff;
}