초심자를 위한 CSS 선택기 집중 과정

CSS 선택기는 CSS 규칙의 첫 번째입니다. 규칙 내부의 CSS 속성 값을 적용하려면 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다.

또는 "CSS 선택기는 스타일을 지정하려는 HTML 요소를 "찾거나"선택하는 데 사용됩니다.



  • 범용 선택기: DOM의 모든 요소를 ​​선택하고 여백과 패딩을 0px로 만듭니다.

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


  • 유형 선택기: 주어진 노드 이름을 가진 모든 요소를 ​​선택합니다. 구문 -> elementName .

  • a {
        text-decoration: none;
    }
    


    위에서 "a"태그를 일치시키고 밑줄이나 텍스트 장식을 제거하십시오.
  • 클래스 선택기: 주어진 클래스 속성을 가진 모든 요소를 ​​선택합니다. 구문 -> .className .

  • .intro {
        color: blue;
    }
    


    위에서 .intro는 "intro"클래스가 있는 모든 요소와 일치하고 텍스트 색상을 파란색으로 변경합니다.
  • ID 선택기: id 속성의 값을 기반으로 요소를 선택합니다. 문서에는 주어진 ID를 가진 요소가 하나만 있어야 합니다. 구문 -> #IdName .

  • #firstName {
        color: red;
        font-size: 20px;
    }
    


    위에서 #firstName는 ID가 "firstName"인 요소와 일치하고 이러한 스타일을 적용합니다.

  • 속성 선택기: 주어진 속성을 가진 모든 요소를 ​​선택합니다. 구문: [attr][attr=value]

  • [title] {
        font-weight: bold;
    }
    


  • [attr=value] : 이것은 값이 정확히 value인 attr의 attribute-name을 가진 요소를 나타냅니다.
  • [attr~=value] : 값이 공백으로 구분된 단어 목록이고 그 중 하나가 정확한 값인 속성 이름이 attr인 요소를 나타냅니다.
  • [attr^=value] : 속성 이름이 attr인 요소를 나타냅니다. 그 값은 값이 접두사(앞)입니다.
  • [attr$=value] : 속성 이름이 attr인 요소를 나타냅니다. 이 요소는 값에 접미사(뒤에)가 붙습니다.
  • [attr*=value] : 속성 이름이 attr인 요소를 나타냅니다. 이 요소에는 문자열 내에서 값이 한 번 이상 포함된 값이 있습니다.
  • 선택기 목록: ,는 그룹화 방법으로 일치하는 모든 노드를 선택합니다.

  • p, .start {
        font-weight: bold;
    }
    


    위의 p.intro는 <p><div class="start"> 요소와 모두 일치합니다.

  • 자식 조합자 : > 조합자는 첫 번째 요소의 직계 자식인 노드를 선택합니다.

  • .intro > img {
        width: 50%;
    }
    


    위에서 <img> 요소 내부에 직접 중첩된 모든 <div class="intro"> 요소와 일치합니다.

  • 일반 형제 결합자: ~ 결합자는 형제를 선택합니다. 이것은 두 번째 요소가 첫 번째 요소를 따르고(꼭 즉시는 아니지만) 둘 다 동일한 부모를 공유한다는 것을 의미합니다.

  • 예: p~span<span> 다음에 오는 모든 <p> 요소와 즉시 일치하거나 일치하지 않습니다.

  • 인접 형제 결합자: + 결합자는 인접 형제를 선택합니다. 이는 두 번째 요소가 첫 번째 요소 바로 다음에 오고 둘 다 동일한 부모를 공유함을 의미합니다.

  • 예: h2 + p<p> 바로 다음에 오는 모든 <h2> 요소와 일치합니다.

  • 하위 조합자: (space) combinator selects nodes that descendant of the first element.
  • Example : div span<span> 요소 내부에 있는 모든 <div> 요소와 일치합니다.


    이 게시물을 즐겼기를 바랍니다 😀

    here에서 저를 지원하실 수 있습니다

    좋은 웹페이지 즐겨찾기