개발하는 루루언니

CSS : first-child / first-of-type 본문

컴퓨터 정보/css

CSS : first-child / first-of-type

혜닝혜루 2022. 12. 12. 22:21
728x90
반응형

f

first-child first-of-type
last-child last-of-type
nth-child(n) nth-of-type(n)

 

예시코드 )

 <style>
    .container p:first-child{
      background-color: blue;
    }
  </style>
</head>
<body>
  
<div class="container">
  <h1>예시코드 입니다.</h1>
  <p>1번째 p </p>
  <p>2번째 p </p>
  <p>3번째 p </p>
</div>

p 태그의 첫번째에 blue라는 색상을 주었을때 어떻게 반응할까?

아무런 반응이 나타나지 않는다. 

 

 <style>
    .container p:first-of-type{
      background-color: blue;
    }
  </style>

스타일을 first-of-type 으로하면?

반응한다.

 

 

그이유는 div안에 형제요소끼리만 반응을 하는데 p태그 맨위에 h1태그가 있어

first-child 에는 스타일이 적용이 되지 않는다.

반면 first-of-type 경우 p 태그를 찾아서 p태그값중 첫번째 아이를 찾아서 스타일을 변경시켜 주기때문에 변경이된다.

728x90

'컴퓨터 정보 > css' 카테고리의 다른 글

CSS : 가상 요소 선택자 정리 : before / after  (0) 2022.12.12
CSS : 가상클래스 선택자 정리 (active / focus/ visited )  (0) 2022.12.12
반응형 웹 : 가변이미지  (0) 2022.12.02
미디어 쿼리란? max-width /min-width  (0) 2022.12.02
CSS : nth-child 와 nth-of-type 을 구별해서 사용하기  (0) 2022.11.29
'컴퓨터 정보/css' Related Articles more