web_frontend(12)CSS 선택자

CSS 선택자

 

1. 기본

2. 복합

3. 가상 클래스

4. 가상 요소

5. 속성

 

 

 

1. 기본 선택자

 

* (전체 선택자)-모든 요소를 선택

* {
  color: red;
}

 

ABC (태그 선택자)-태그 이름이 ABC인 요소 선택

li {
  color: red;
}

 

 

.ABC (클래스 선택자)-HTML class 속성의 값이 ABC인 요소 선택

.orange {
  color: red;
}

 

 

#ABC (아이디 선택자)-HTML id 속성의 값이 ABC인 요소 선택

#orange {
  color: red;
}

 

 

2. 복합 선택자

 

 

ABCXYZ (일치 선택자)- 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택.

 

span.orange {
  color: red;
}

span.orange -> 태그 선택자 + 클래스 선택자 

span태그와 orange클래스인 요소에만 적용

 

태그 선택자를 쓸때는 기호가 없기 때문에 구분이 안되기 때문에 주의 해야한다.

위의 예시와 같이 span.orange 이렇게 써주는데 .orangespan처럼 쓰면 같은 의미로 썼더라도 orangespan 이라는 클래스를 바꾼다고 인지하기 때문에 태그 선택자를 앞에 쓰는게 좋음

 

 

ABC > XYZ (자식 선택자)-선택자 ABC의 자식 요소 XYZ 선택.

 

ul > .orange {
  color: red;
}

ul태그 안에 있는 요소 중 orange클래스인 요소의 css가 변경된다.

 

 

 

ABC XYZ (하위(후손) 선택자)-선택자 ABC의 하위 요소 XYZ 선택. "띄어쓰기"가 선택자의 기호!

 

div .orange {
  color: red;
}

 

div태그 안에있는 orange 클래스인 요소들의 css가 변경 (자식포함해서 포함하고 있는 모든요소에 적용)

일반적으로 자식 선택자보다 하위 선택자를 더 많이 사용함 더 명확하게 할 경우에 자식 선택자 씀

 

 

 

ABC + XYZ (인접 형제 선택자)-선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

 

.orange + li {
  color: red;
}

위와 같이 쓰면

<ul>
  <li></li>
  <li></li>
  <li class="orange"></li>
  <li></li> <- 요게 선택 된다.
  <li></li>
</ul>

 

 

ABC ~ XYZ (일반 형제 선택자)-선택자 ABC의 다음 형제 요소 XYZ 모두를 선택.

 

.orange ~ li {
  color: red;
}

위와 같이 하면

 

<ul>
  <li></li>
  <li></li>
  <li class="orange"></li>
  <li></li>  <- 선택
  <li></li>  <- 선택
</ul>

일반 형제 선택자 보다 인접형제 선택자가 더 많이 사용 됨

 

 

 

3. 가상 클래스 선택자

 

ABC:hover  (Hover)-선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택.

a:hover {
  color: red;
} 

 

 

ABC:active   (ACTIVE)-선택자 ABC요소에 마우스를 클릭하고 있는 동안 선택.

a:active {
  color: red;
}

 

 

 

ABC:focus   (FOCUS)-선택자 ABC요소가 포커스 되면 선택.

input:focus {
  background-color: orange;
}

Focus가 될 수있는 요소는 HTML 대화형 콘텐츠가 해당 한다.

INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있다. 

그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 Focus가 될 수 있다.

 

원래 Focus가 안되는 요소도 Focus로 가능한 형태로도 만들수 있다. 

tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다.

이름에서도 알 수 있듯이. Tab키를 사용해 Focus 할 수 있는 순서를 지정하는 속성

순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않음

 

 

 

ABC:first-child  (FIRST CHILD)-선택자 ABC가 형제 요소 중 첫째라면 선택

.fruits span:first-child {
  color: red;
}

fruits 클래스의 자식중  span 태그 인 첫번째 요소 찾음 

 

 

ABC:last-child    (LAST CHILD)-선택자 ABC가 형제 요소 중 막내라면 선택.

.fruits h3:last-child{
  color: red;
}

 

 

ABC:nth-child(n)   (NTH CHILD)

.fruits *:nth-child(2) {
  color: red;
}

 

이런식도 가능  n은 0부터 시작

짝수
.fruits *:nth-child(2n) {
  color: red;
}



홀수
.fruits *:nth-child(2n+1) {
  color: red;
}



3부터 시작
.fruits *:nth-child(n+3) {
  color: red;
}

이런식으로 다양하게 요소들이 선택 가능하다.

 

 

ABC:not(XYZ)   (부정 선택자,  NOT)-선택자 XYZ가 아닌 ABC요소 선택

.fruits *:not(span) {
  color: red;
}

 

4. 가상 요소 선택자

 

ABC::before   (BEFORE)-선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입.

.box::before {
  content: '앞';
}

 

 

 

ABC::after   (AFTER)

.box::after {
  content: "뒤";
}

일단 아무것도 추가 안하더라도 content=""; 요렇게 빈거는 추가 하고 시작해야함

content말고 다른일을 할수도 있어서 content는 무조건 있어야함

 

 

 

5. 속성 선택자

 

 

[ABC]    (ATTR)-속성  ABC를 포함한 요소 선택

[disabled] {
  color: red;
}

 

주의점

[type] {
  color: red;
}

모든속성이 가능하지만 input태그를 쓸때 type을 거의 무조건 사용하는데 이때 이렇게 되면 모든 input 태그가 항상 선택이 되기 때문에 좋지 않음

 

 

[ABC="XYZ"]    (ATTR=VALUE)-속성 ABC를 포함하고 값이 XYZ인 요소 선택.

 

[type="password"] {
  color: red;
}

 

 

스타일 상속

 

상속되는 CSS 속성들은 모두 글자/문자 관련 속성들!

(모든 글자/문자 속성 아님)

 

font-style

font-weight

font-size

line-height

font-family

color

text-align

.

.

.

 

 

강제 속성

상속이 되지 않는 CSS요소도 강제로 상속하게 만들수 있음

 

CSS에서 다음과 같이 inherit를 해주면 된다.

.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}



.child {
  width: 100px;
  height: inherit;
  background-color: inherit;
  position: fixed;
  top: 100px;
  right: 10px;
}

 

 

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

 

 

1. 점수가 높은 선언이 우선함!

2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!

 

<div 
  id="color_yellow"
  class="color_green"
  style="color: orange;">
  Hello world!
</div>

 

div           { color: red !important; }
#color_yellow { color: yellow; }
.color_green  { color: green; }
div           { color: blue; }
*             { color: darkblue; }
body          { color: violet;   }

 

위와 같이 했을때

 

!important 999999999999점 무한대

인라인 선언  1000점

id 선택자 100점

class 선택자 10점

태그 선택자 1점

전체 선택자 0점

body 상속 x 점수 별도로 계산안함

 

가상 클래스 선택자 -> 10점

가상 요소 선택자 ->  1점   태그 선택자랑 비슷함

:not은 점수 계산 x   부정 선택자들은 점수 계산안함

 

 

인라인 선택자는 점수가 너무 높아서 최대안 안 쓰는 방향으로 CSS를 진행하는것이 좋음