2. CSS (연결 선택자, 속성 선택자)

연결 선택자

선택자와 선택자를 연결해 적용 대상을 제한하는 선택자

1. 자손 선택자 (= 하위 선택자)
   부모 요소에 포함된 '모든 하위 요소'에 적용 : 선택자 A와 B 사이에 공백을 두어 사용 : 상위요소(A) 하위요소(B) { ... } : div 요소 내의 모든 p요소에 스타일 적용
2. 자식 선택자
   자식 요소에 스타일을 적용하는 선택자 : A의 직접적인 자식인 B요소에게만 적용 : 선택자 A와 B 사이에 > 기호를 사용
   
   
3. 인접 형제 선택자
   같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용 : 선택자 A와 B 사이에 + 기호를 사용
4. (일반) 형제 선택자
   형제 요소들에 스타일 적용 : 인접 형제 선택자와의 차이점 - 모든 형제 요소에 다 적용 : 선택자 A와 B 사이에 ~ 기호를 사용

<div>
    <p>HTML 고급 선택자</p>
    <!-- 
      ul 요소의 직접적인 자식인 li요소에만 스타일 적용 
    -->
    <ul>
      <li>
        <!-- 
          하위 선택자는 자식 요소 뿐만이 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소에 적용 
        -->
        <p>div 내의 모든 p요소</p>
      </li>
    </ul>
  </div>
  <p>HTML의 고급 선택자를 학습합니다.</p>

  <ul>
    <li>1. 연결선택자</li>
    <li>2. 속성선택자</li>
    <li>3. 가상 클래스와 가상 요소</li>
  </ul>

  <!-- 형제 요소: 같은 레벨에 있는 요소 -->
  <h1>연결 선택자</h1>
  <p>자손 선택자</p>
  <p>자식 선택자</p>

  <div></div>
  <span>자손 선택자는</span>
  <span>부모 요소에 포함된 모든 하위 요소에 적용됩니다.</span>

 

/* 자손 선택자 */
div p {
  color: red;
}

/* 자식 선택자 */
ul > li {
  font-weight: bold;
}

/* 인접 형제 선택자 */
h1 + p {
  font-style: italic;
}

/* (일반) 형제 선택자 */
div ~ span {
  text-decoration: underline;
}

 

속성 선택자

HTML 요소의 특정 속성을 기반으로 스타일을 적용

→ 특정 요소를 가진 요소, 특정 값이나 값의 일부를 가진 속성을 포함한 요소를 선택

→ 해당 태그 내에 특정 속성을 선택할 경우에 사용

 

1. [속성]선택자
   해당 속성(명)을 가진 모든 요소를 선택 : 속성의 값에 상관없이 적용 : 요소선택자[속성명]
   
   
2. [속성="값"] 선택자
   주어진 속성과 속성 값이 일치하는 요소를 선택 : 요소선택자[속성명="값"]
   
   
3. [속성~="값"]선택자
   여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택 : 예) class 속성 - class="example sentence" - 클래스 속성의 두가지 값 중 해당 값이 포함되어 있으면 적용 가능
4. [속성|="값"] 선택자
   특정 값이 포함된 속성을 가진 요소를 선택 : 하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용
   
   
5. [속성^="값"] 선택자
   특정 값으로 시작하는 요소를 선택
   
   
6. [속성$="값"] 선택자
   특정 값으로 끝나는 요소를 선택
   파일 경로, url에 주로 사용
   
   
7. [속성*="값"] 선택자
   값의 일부가 일치하는 속성을 가진 요소를 선택

<input 
    type="text" 
    name="firstname" 
    value="First Name" 
  />
  <input 
    type="password" 
    name="lastname"
  />
  <br />
  <a href="https://www.example.com">Visit Example.com</a>
  <br />
  <div class="example sentence-div">
    This is a div element with a class attribute
  </div>

  <div class="sentence-div">
    This is a div element with a class attribute
  </div>

 

/* [속성] 선택자 */
input[value] {
  background-color: yellow;
}

/* [속성="값"] 선택자 */
input[type="password"] {
  background-color: green;
}

/* [속성~="값"] 선택자 */
div[class~="sentence"] {
  border: 1px solid black;
}

input[value~="Name"] {
  border: 1px solid pink;
}

/* [속성|="값"] 선택자 */
/* 
  - 하이픈으로 연결된 속성값은 스타일 적용에 무시 
  - : 연결된 단어이지만 각각의 속성값으로 적용 가능
*/
div[class|="sentence"] {
  text-decoration: underline;
}

/* [속성^="값"] */
a[href^="https://"] {
  color: green;
}

/* [속성$="값"] */
a[href$=".com"] {
  background-color: black;
}

/* [속성*="값"] */
.example[class*="example"] {
  font-size: 20px;
}
/* 
*[class*="example"] {} 
*/