[입문] HTML CSS - CSS의 선택자의 모든 것! ( selector, 상속, 우선순위 )

css의 선택자에 대해 알아보자 . 

CSS - Cascading Style Sheet 

그후 상속 과 우선순위에 대해서도 같이 알아보자 .

 

---

1. 스타일 우선순위

inherited> * > tag 스타일 < class < id < 인라인 스타일 < !important

 

2. 스타일 상속

부모요소에 있는 스타일 속성이 자식 요소로 전달된다.

---

< 선택자의 종류 selector>

1. Type : 태그명으로 선택 

2. class :   . 으로 선택한다. 클래스 다중 선택가능 (html에서 클래스명 띄우고 또 적으면됨)

    id :   # 으로 선택한다.

ex) div.box { }   div중에 클래스가 box인것 선택 !

 

3. 속성 선택자  Attribute selector    요소[ ] 

ㅡ [속성명] 

a[target] { color: pink;}

 

ㅡ [속성=value]

a[href="http://naver.com"] { color: red;}

input[type="submit"] { background-color:green;)

 

ㅡ[속성^] : 뒤에 있는 값으로 시작하는 값을 모두 선택

a[href^="http://"]  {

          color: red; }

[속성$="~"] ~ : ~ 로 끝나는 것을 모두 선택

a[href$=".com"]

{

  color: red;

}

[속성*="~"] : ~적어도 하나를 가지고 있는 것 모두 선택

a[href*="com"]

{

  color: red;

}

---

ㅡ 예제 : 중첩가능하다.   

ol li:nth-child(3) ~ li {

color: gray;

}

ol 안의 li 태그중에 3번째 이후에 있는 li 태그들에게 gray 컬러 준다.

 

ㅡ 예제2

ol li:only-child {

color:red;

}    자식이 오직 1개의 li 에게 red주기 

 

---

4. 가상클래스 선택자  :

ㅡ fist-child 형제 /last-child 형제 /nth-child 자  : 태그명,클래스명, 자식의 형제들 / 자식의 형제들 중에서몇번째로 나오기 때문에 자식이 다른태그와 순서 섞여있으면 안됨.

/* 홀수2n-1 짝수2n  li의 몇번째*/ 

li:nth-child(2n-1) {

    color: pink;

}

 

ㅡ first-of-type() / last-of-type() / nth-of-type(even) : 태그,클래스명으로 가능(태그명이 편함) /특정 타입의 몇번째로 계산됨

ㅡ not : !를 제외한 나머지에 000처리해주세요 .       select:not(.클래스) {  }

input:not(.email) {

  background-color: blue;

}

input:not([type=password]) {

  background-color: blue;

}

 

 

ㅡ 예시1  두개 중첩도 가능하다.

버튼이 비활성화 된게 아닌 ! 그리고 hover되면 레드색상 배경주기.

button:not(:disabled):hover {

background-color:red;

}

ㅡ 예시2 

인풋 타입이 체크드인 요소가 체크되면 ! 그리고 + 인접된 형제선택자의 값이 변한다.

input[type="checked"]:checked + label {

color : blue;

}

 

---

5. 동적 가상클래스 ㅡ  L V H A 순서로 진행 ( link -visited -hover- acitve)

ㅡ link : 링크의 상태변경/    visited  : 방문했던 것을 변경

 

a:link {

  color: pink;

}

a:visited {

  color: blue;

}

ㅡ hover : 커서를 올렸을때 변경 /  active :  클릭 했을때 변경 / focus : 탭으로 포커싱 or 입력하는 text 선택 시에 변경 

input[type="button"]:hover {

  background-color: pink;

}

 

ㅡ enabled : disabled이 있는 요소에는 적용안됨 /  disabled :비활성화 /  checked : 체크된 곳에 변경

input[type="radio"]:checked {

  outline: 3px solid red;

}

 

6 . 가상요소 선택자  ::

ㅡ before  : 전에 추가/   after : 후에  추가  (뱃지나, 구분 바 추가 할때 꾸밈의 요소로 사용함)

.box::before {

  content: "1";

  color: blueviolet;

}

 

ㅡ first-letter : 첫번째 글자만 변경 /   first-line : 첫 줄만 변경 / selection :  선택 영역만 변경 (드래그)

.lorem::first-letter {

  color: red;

  font-size: 30px;

}

 

---

7. 선택자 결합  ㅡ 하위 :  스페이싱으로 사용 (한칸 띄워서) / 자식 : > 로 사용

ul li:last-of-type {

  color: red;

}

 

ㅡ 일반 형제 선택자 결합 :  그룹화 ~ 로 표현 / 선택 ~ 뒤 쪽으로만선택가능

div ~ p {

  color: pink;

}

ㅡ 인접 형제 선택자 결합 :  바로 뒤에 있는 코드를 선택함 / + 로 선택

ㅡ 그룹화 : 전부선택  , 로 표현함 

div, p, .box {

  background-color: aqua;

}

 

---

8. 범용 선택자 / 전체 선택자 : * 로 사용함

*  전체선택자는 성능저하 가능성이 있다. ( 참고 )

p + * {

  background-color: blue;

}

 

.box * { color:red;}

==>클래스가 box인 요소의 하위 모든 자식

 

---

ㅇ 상속 제어하기 

ㅡ CSS 오류가 있을때 대부분 상속을 끊어보면서 찾는다.

ㅡ initial : 상속을 끊는다 / inherit : 상속을 받는다 

ㅡ  unset : css파일이 많을 때 상속받는 값이 무엇인지 알아볼 때 사용

1. 부모로부터 상속받을 값이 있을 때 : inherit , 2.부모로부터 상속받을 값이 없을때 :initial

.parent1 .child1 {

  all: unset;

}

 

---

 

ㅇ 우선순위는 무엇인가 ?

ㅡ Cascading 의 원칙에 의해서 스타일링이 적용되는 우선순위 이다.

ㅡ    inherited> * > tag 스타일 < class < id < 인라인 스타일 < !important

ㅡ 선언된 곳

ㅡ 명시도 (적용범위가 적을수록 명시도가 높은 것 !   class < id )

ㅡ 코드 위치 (나중에 선언된 것)

 !important >>> 치트키 !

div {

  color: purple !important;

}