ChangMinYang

코딩노잼

CSS(Cascading Style Sheets) 선택자

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

1. * selector(전체 선택자)

*로 css 전체를 선택한다.

* {
        color: black;
}

2. element selector(요소 선택자)

지정된 타입 이름으로 선택한다.

img {
        width: 100px;
        height: 200px;
}

3. list selector(목록 선택자)

,로 여러 목록을 선택한다.

h1,h2 {
        color: magenta;
}

4. id selector(id 선택자)

#으로 id를 선택한다.

#logout {
        color: orange;
        height: 200px;
}
  • id를 많이 쓰고 싶은 충동이 있지만 id를 최소화 하는게 좋으며, 그저 모든 걸 다르게 만들려고 id를 늘리는 방법말고 다른 방법이 더 좋다. (강사님은 한 페이지에 10개 이내로 사용한다고 한다.)

5. class selector(클래스 선택자)

.으로 class를 선택한다.

.complete {
        color: green
}

6. descendant selector(하위 선택자)

공백으로 하위를 선택한다.

li a {
        color: teal;
}

(아래 부터는 잘 사용되지 않는 선택자다.)

7. adjacent selector(인접 선택자)

같은 단계의 h1태그 다음에 있는 p태그를 선택한다.(형제의 개념)

h1 + p {
        color: red;
}

8. direct child selector(직계 자식 선택자)

div태그 직계 자식인 li태그만 선택한다.

div > li {
        color: white;
}

9. attribute selector(속성 선택자)

input[type="password"] {
        color: greenyellow;
}

/* href속성 에서 google이 포함된 모든 앵커 태그 */
a[href*="google"] {
        color: magenta;
}

/* href속성 에서 .org로 끝나는 앵커 태그 */
a[href$=".org"] {
        color: magenta;
}

10. pseudo classes(가상 클래스)

선택자 뒤에 붙여 특정 이벤트를 선택한다.

button:hover {
        background-color: red;
        color: white;

}

button:active {
        background-color: aqua;
}

nth-of-type은 n번째 마다 이벤트 선택한다.

button:nth-of-type(3) {
        /* 3번째 버튼 선택 */
        background-color: Yellow
}

button:nth-of-type(3n) {
        /* 매번 3번째 버튼 선택 */
        background-color: Gray
}

button:nth-of-type(even) {
        /* 짝수 번째 버튼 선택 */
        background-color: black
}

11. pseudo elements(가상 요소)

선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

12. specificity(명시도)

ID > CLASS > ELEMENT ex)1개당 100,10,1의 값을 가진다고 생각할 수 있지만 20개의 element보다 1개의 class가 더 높은 우선순위를 가진다.

  • 같은 값일 경우 당연히 아래에 있는 코드가 반영된다.
    • 그런 경우 개발자 도구에서는 취소선으로 표시해준다.

1) inline style

inline은 가장 명시도가 높다. 하지만 css가 아닌 html에 적어야 하는 방식으로 여러 이유로 추천하지 않는 방식이다.

2) important

이 방법 또한 추천하지 않는 방식이며, 특성 뒤에!important을 넣어 다른 어떠한 것보다도 자동으로 가장 명시적인 지시로 인식하게 해준다.

button {
        background-color: magenta !important
}

3) css inheritance(상속)

일부 요소는 상속이 안되므로 inherit;을 넣어주면 된다.

button, input {
        color: inherit;
}

댓글남기기

참고