css선택자(기본선택자,태그선택자,클래스선택자,아이디선택자)

기본선택자

<p>This is a paragraph.</p>

<div clss='my-class'>This is an inline element.</div>

<div id ='my-id'
>This is a block element.</div>

• CSS 기본 선택자는 모든 요소를 선택합니다.
• *를 활용해 전체선택

* {
  color: red;
}

 

• 태그 선택자는 특정 태그의 요소를 선택합니다.

div {
  color: blue;
}

• 클래스 선택자는 특정 클래스를 가진 요소를 선택합니다.

.my-class {
  color: green;
}

 

 

• ID 선택자는 특정 ID를 가진 요소를 선택합니다.

#my-id {
  color: yellow;
}

 

 

복합선택자

복합 일치 선택자

복합 일치 선택자는 특정 태그와 조건을 함께 사용하여 요소를 선택합니다.

예를 들어, div 태그가 id 속성의 값이 main인 요소를 선택하려면 div#main을 사용합니다.

 

<div id="main">
  This is the main content.
</div>

div#main {
  color: red;
}

 

복합 후손 선택자

복합 후손 선택자는 특정 태그의 자식 요소 중 조건을 만족하는 요소를 선택합니다.

예를 들어, div 태그의 자식 p 태그 중 class 속성의 값이 info인 요소를 선택하려면 div p.info를 사용합니다.

<div>
  <p class="info">This is a paragraph with the info class.</p>
  <p>This is a paragraph without the info class.</p>
</div>

div p.info {
  color: blue;
}

 

복합 자식 선택자

복합 자식 선택자는 특정 태그의 후손 요소 중 조건을 만족하는 요소를 선택합니다.

예를 들어, div 태그의 자식 p 태그 중 class 속성의 값이 info인 요소를 선택하려면 div > p.info를 사용합니다.

 

<div>
  <p>This is a paragraph without the info class.</p>
  <div>
    <p class="info">This is a paragraph with the info class.</p>
  </div>
</div>

div > p.info {
  color: green;
}

 

복합 인접 형제 선택자

복합 인접 형제 선택자는 특정 요소의 다음 형제 요소 중 조건을 만족하는 요소를 선택합니다.

예를 들어, p 태그의 다음 형제 div 태그 중 class 속성의 값이 info인 요소를 선택하려면 p + div.info를 사용합니다.

 

<p>This is a paragraph.</p>
<div class="info">This is a div with the info class.</div>
<p>This is another paragraph.</p>

p + div.info {
  color: purple;
}

 

 

복합 일반 형제 선택자

복합 일반 형제 선택자는 특정 요소의 모든 형제 요소 중 조건을 만족하는 요소를 선택합니다.

예를 들어, p 태그의 모든 형제 div 태그 중 class 속성의 값이 info인 요소를 선택하려면 p ~ div.info를 사용합니다.

<p>This is a paragraph.</p>
<div class="info">This is a div with the info class.</div>
<p>This is another paragraph.</p>
<div class="info">This is another div with the info class.</div>

p ~ div.info {
  color: black;
}