css 선택자

HTML 2015. 9. 6. 06:19

선택자를 통해서  해당 css 를 먹히게 한다 


1. 태그 선택자 


2.클래스 선택자 - .클래스 이름  

ex) <p class='test'></p>

.test 이런식으로 접근가능 

클래스를 만들어 서로 다른 엘리먼트에 여러 번 적용해서 사용할 수있습니다.


3. 아이디 선택자 - #클래스 이름 

 ex) <p id='test'></p>

#test 이런식으로 접근가능 

클래스 선택자와 달리 다른 태그에 반복해서 적용 불가 

아이디라는 엘리먼트 개념은 중복불가하고 고유한 이름만 사용한다 

다른페이지에서는 중복 되는 이름 사용가능 

자바 스크립트 프로그램에서 값을 얻거나 수정 할 때 사용하기도 합니다 .


4. 하위 선택자 

클래스 선택자 안의 또다른 태그에 따로   옵션을 넣어 줄수 잇다 

예로 

아래와 같을때 div에 스타일을 먹인후  h1와 달리 p에만 다른 스타일을 주고싶다면 

.style_div p{

color:white; 

}

이다 

<div class='style_div'>

<h1>11</h1>

<p> 22</p>

</div>



5. 그룹 선택자 - 선택자 이름만 다르고  스타일 내용을 똑같이 반복하는경우 

예로 

h1{ font-family:sans-serif}

h2{ font-family:sans-serif}

h3{ font-family:sans-serif}

이것을  h1 , h2 ,h3 {font-family:sans-serif} 와 같이 표현할 수 있다 


6.전체 선택자  - 모든 엘리 먼트를 선택할 때 사용 또는  #AB* 이런 경우 AB로 시작되는 모든 아이디가 다 같은 스타일이 먹도록 할 수있다 

예로 

* {font-size:12px} - 모든 엘리먼트 선택할때 

#content* {font-size:12px}  #content 라는 이름의 id 선택자가 지정된 엘리먼트에게 다 스타일 먹일때 


7. 앵커 유사 클래스 선택자 

-. 를 찍고 그다음에 선택자 이름을 적은것을 클래스 선택자라고 하는데  .를 찍은뒤 그위에 . 를 더 찍었을경우 클래스 선택자와 비슷하다고 유사 클래스 라고 한다 


:empty 선택자는 엘리먼트안에 아무것도 없는 공백 상태일때 선택이 된다 

예로  p:empty{ background:red;}   p,엘리먼트 안에 아무것도 없을때 배경색을 빨간색으로 변경합니다 


주로 유사클래스 선택자는 하이퍼링크에 스타일을 주기 위해 쓰인다 


:link 선택자 - 한번도 방문하지 않은 a 엘리먼트의 링크 선택 

:visited 선택자 - 한번이상 방문한 a엘리먼트들의 링크 선택 

:hover 선택자  마우스 커서가 a 엘리먼트의 링크 위에 올려 졋을 때 선택 

:active 선택자 마우스 버튼을 a 엘리먼트의 링크 위에 클릭 했을 때의 순간을 선택 

Posted by 이상욱1
,