오늘도 개발

CSS 선택자 활용하기 본문

웹 프로그래밍/HTML & CSS

CSS 선택자 활용하기

Sueeeeeee 2022. 3. 15. 18:27

selector(선택자)

스타일 입힐 요소를 선택하게 해줌

태그 선택자 < 클래스 선택자 < id 선택자 순으로 우선순위가 높음.

 

a {
   color:red;
}

/* a는 selector(선택자) */
/* color:red;는 declaration(선언) */
/* color는 property(속성) */
/* red는 value(값) */

.name {
   color: blue;
}
/* a태그 중 name클래스를 가진 것들은 파란색으로 나옴 */

 

1) Simple Selectors (단순 선택자)

Universal Selector (전체 선택자)

페이지의 모든 요소 선택

 

* {
   padding: 0;
   margin: 0;
   border: 0;
}

 

Tag Selector(태그 선택자)

HTML 요소 선택

선택한 요소의 하위 요소 모두 상속 적용. (BUT 패딩, 보더 같은 배치 관련 속성은 상속 안됨.)

 

h1 {
   color: blue;
}

 

Class Selector(클래스 선택자)

특정 클래스 갖는 요소 선택. 여러 요소에 중복 사용 가능

 

.title {
   color: blue;
}

 

Id Selector(아이디 선택자)

특정 아이디 갖는 요소 선택. 문서당 하나만 사용 가능

 

#summary {
    color: blue;
}

 

Group Selector(그룹 선택자) :

여러 요소를 ','로 연결해서 동시 선택

 

div, p, .summary {
    text-align: center;
}

 

2) Combinator Selectors (복합 선택자)

Descendant Selector (하위 선택자) 

자손 요소(자식의 자식까지 포함)를 선택

 

/* div의 자손 중 p는 파랑으로 지정 */
div p {
  color: blue;
}

 

Child Selector (자식 선택자) : >

직계 자식만 선택

 

/* div의 직계 자식 중 p만 파랑으로 지정 */
div > p {
  color: blue;
}

 

Sibling Selector (인접 형제 선택자) : +

어떤 요소의 첫째 동생만 선택

 

/* div의 동생 중 첫번째로 등장하는 p만 파랑으로 지정 */
div + p {
  color: blue;
}
<body>
   <div>
   </div>
   <!--첫째 동생만 파랑으로 바뀜-->
   <p>div의 첫째 동생 p</p>
   <p>div의 둘째 동생 p</p>
</body>

 

Sibling Selector (일반 형제 선택자) : ~

어떤 요소의 모든 동생 선택

 

/* div의 동생 중 첫번째로 등장하는 p만 파랑으로 지정 */
div ~ p {
  color: blue;
}

 

3) Attribute Selectors (속성 선택자)

[attribute] Selector 

특정 속성을 갖고 있는 것은 모두 선택

 

/* alt 속성을 갖고 있는 모든 img 가로를 100px으로 설정 */

img[alt]{
   width: 100px;
}

 

 

[attribute="value"] Selector 

특정 속성을 갖고 있고 특정한 속성값을 갖는 것만 선택

 

img[alt="sleepy cat"]{
   width: 100px;
}

 

4) Pseudo-class (가상 클래스)

element:first-child

element 중 첫번째 자식인 것을 선택

 

/* 문서 내 모든 p 중 첫번째 자식인 것을 선택 */
p:first-child {
   color: blue;
}

 

element:nth-child(number)

element 중 number번째 자식인 것을 선택

 

/* 문서 내 모든 p 중 두번째 자식인 것을 선택 */
p:nth-child(2){
   color: blue;
}

 

:link, :visited, :hover, :active, :focus

 

/* 방문한 적 없는 링크 */
a:link{
    color: yellow;
}

/* 방문한 적 있는 링크 */
a:visited{
    color: blue;
}

/* 링크에 마우스 올렸을 때 */
a:hover{
    color: red;
}

/* 마우스 눌렀다 놓는 동안일 때 */
a:active{
   color: yellow;
}

/* 텍스트 입력 폼 클릭하고 입력하는 중일 때 */
input:focus{
   background-color: yellow;
}

 

5) Pseudo-element(가상 요소)

XHTML(EXtensible HTML. HTML과 비슷하지만 문법이 더 엄격)에서 최초의 줄이나 문자 등 지정할 수 있게 해줌. CSS3부터 ::로 사용. IE 5.5 - 8에선 CSS2 문법인 :로 사용해야 작동.

 

::first-line 

block level 요소에서 문단 첫번째 줄 선택

 

/* 문서 내 모든 p의 첫줄 선택 */
p::first-line {      
    line-height: 10px;
}

 

::first-letter

block level 요소에서 첫번째 글자 선택

 

/* 문서 내 모든 p의 첫번째 글자 선택 */
p::first-letter {  
    text-transform: uppercase;
}

 

::before, ::after

요소의 컨텐츠의 앞과 뒤에 삽입할 때 사용. (요소 다음에 삽입하는 게 아님). 디폴트 display 값은 inline.

 

/* 문서 내 모든 p 앞에 '주의' 삽입 */
p::before {
    content: "주의 - "
}

/* 문서 내 모든 p 뒤에 '!' 삽입 */
p::after {
    content: "!"
}

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS display 이해하기 1 (inline, block, inline-block)  (0) 2022.05.13
CSS 박스 모델 이해하기  (0) 2022.05.12
HTML로 웹 접근성을 높이는 방법  (0) 2022.05.12
HTML문서에 CSS를 적용하는 세 가지 방법  (0) 2022.03.15
HTML 기본용어  (0) 2022.03.15
'웹 프로그래밍/HTML & CSS' Related Articles more