/ W3SCHOOLS

W3schools - CSS_Combinator

이 페이지는 다음에 대한 공부 기록입니다
Lecture에서 배웠던 내용을 복습하며 작성했습니다

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Combinator

Is something that explains the relationship between the selectors

selector Example description
element element div p Select all <p> elements inside <div> elements
element>element div>p Select all <p> elements where the parent is a <div> element
element+element div+p Select the first <p> element that are placed immediately after <div> elements
element1~element2 p~ul Select every <ul> element that are preceded by a <p> element

pseudo-class

Is used to define a special state of an element

  • Ex) Style an element when a user mouses over it, Style an element when it gets focus ..

Syntax

selector:pseudo-class {
    property: value;
}

https://www.w3schools.com/css/css_pseudo_classes.asp

pseudo-element

Is used to style specified parts of an element

  • ex) style the first letter, or line, of an element, or insert content before, or after, the content of an element

Syntax

Selector::pseudo-element {
    Property: value;
}

Attribute selector

To style HTML elements that have specific attributes or attributes values

Selector Example Description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target=”_blank”
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower”
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en”
[attribute^=value] a[href^=”https”] Selects every <a> element whose href attribute value begins with “https”
[attribute$=value] a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value] a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools”