본문 바로가기
WEB CODING/CSS

:nth-child / :nth-last-child / :first-child / :last-child

by uioweb 2020. 8. 17.

:nth-child 사용방법

5번째에 있는 태그에 CSS를 주는 방법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-child(5){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

5번째에 위치해 있는 태그들에게 CSS를 주는 방법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-child(5n){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

5번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주는 방법( 4번째 위치해 있는 태그들이 선택된다. )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-child(5n-1){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

:nth-last-child 시용방법

뒤에서 부터 시작해서 7번째에 위치해 있는 태그에 CSS를 주는 방법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-last-child(7){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

뒤에서 부터 시작해서 7번째에 위치해 있는 태그들에게 CSS를 주는 방법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-last-child(7n){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

뒤에서부터 시작해서 7번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주는 방법( 뒤에서 6번째에 위치해 있는 태그들이 선택된다. )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:nth-last-child(7n-1){color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

:first-child 사용방법

첫번째 태그를 선택한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:first-child{color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

:last-child 사용방법

마지막에 있는 태그를 선택한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p:last-child{color:red}
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
  </body>
</html>

 

'WEB CODING > CSS' 카테고리의 다른 글

:nth-child / :nth-last-child / :first-child / :last-child  (0) 2020.08.17
overflow 속성  (0) 2020.07.04
float 속성  (0) 2020.07.04
position 속성  (4) 2020.06.27
display 속성  (0) 2020.06.27
border-radius 속성  (0) 2020.06.27

댓글0