About CSS selectors

CSS (Cascading Style Sheets) is responsible for providing styles to HTML elements. To do so, you need to be familiar with selectors because you need to specify the HTML element to which you want to apply the style.

First, the basic rules of CSS are as follows:

Here, the part marked h1 is the selector. The HTML tag called h1 was selected and the following style was applied. Properties and values move as one pair.

Default CSS selector

1. universal selector

Rule: *

Description: Selects all elements within an HTML document. All elements, including html elements, are selected. (Head element is also included) It is mainly used when there is a style that needs to be applied to the entire document at once, such as box-sizing.

* {
box-sizing: border-box;
}

2.Tag Selector (Type Selector)

Rule: Tag name

Description: Selects the element with the specified tag name.

3. ID Selector

Rule: #idname

Description: This is a selector that selects the id value. ID cannot be used repeatedly in HTML.

4. Class Selector

Rule: .classname

Description: This is a selector that selects a class value. Classes can be used repeatedly in HTML documents.

5. Tag, ID, class composite selector

Rule: Tag#idname Tag.classname #idname.classname

Description: This is a selector that selects a mixture of tag, id, and class values. Use it when you need to specifically mention an element, and be careful not to leave a space. (It appears later, but the method with a space is a selector that selects descendant elements.)

/* p태그이면서 p-tag라는 클래스값을 가지는 요소를 선택*/
p.p-tag {
color: gray;
}
/* p태그이면서 #third-line이라는 id값을 가지는 요소를 선택*/
p#third-line {
text-decoration: underline;
}

6. Attribute Selector

Rule: Selector[attribute]

Description: Selects all elements with the specified attribute (property value).

a[href] { color: red; }

Rule: Selector[attribute="value"]

Description: Selects all elements that have the specified attribute and whose value matches the specified value.

a[target="_blank"] { color: red; }
input[type="text"]

Compound CSS selector

Descendant selector

Elements belonging to one level higher than the parent element are called parent elements, and elements belonging to one level lower are called descendant elements. Elements that are n levels lower than themselves are called descendant elements (lower elements).

Rule: Selector A Selector B

Description: A descendant selector selects an element that matches selector B among all descendant (child) elements of selector A. The key is to select selector B!

The code below selects the p tag among all div tags.

/* div 요소의 후손요소 중 p 요소 */
    div p { color: red; }

Child Combinator

Rule: Selector A > Selector B

Description: The descendant selector selects the element that matches selector B among all child elements of selector A.

/* div 요소의 자식요소 중 p 요소 */
    div > p { color: red; }

Sibling Combinator

1) Adjacent Sibling Combinator

Rule: Selector A + Selector B

Description: Selects the selector B element located immediately after selector A among the sibling elements of selector A. If other elements exist between A and B, they will not be selected.

<style>
    /* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
    p + ul { color: red; }
  </style>

  <p>The first paragraph.</p>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

2) General Sibling Combinator

Rule: Selector A ~ Selector B

Description: Among the sibling elements of selector A, select all elements of selector B that are located after selector A.

<style>
    /* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
    p ~ ul { color: red; }
 </style>

Pseudo-Class Selector

A virtual class selector is a method of randomly specifying and selecting a virtual class even though the original class does not exist. This specifies a virtual class that applies only to certain states, such as when the mouse moves.

Virtual classes use a colon (:) instead of a period (.). They have a predefined name by the CSS standard, so arbitrary names cannot be used.

The following is an example of setting the background-color to yellow when the div element is in the hover state (when the mouse is on the mouse).

<style>
    /* a 요소가 hover 상태일 때 */
    a:hover { color: red; }
    /* input 요소가 focus 상태일 때 */
    input:focus { background-color: yellow; }
 </style>

Dynamic selectors (User action pseudo-classes)

:link When the selector is an unvisited link

:visited When the selector is a visited link

:hover When the mouse is hovering over the selector

:active When the selector is clicked

:focus When focus is on the selector

Structural pseudo-class selectors

:first-child Selects the element that is the first child among all elements corresponding to the selector

:last-child Selects the element that is the last child of all elements corresponding to the selector

:nth-child(n) Selects the element that is the nth child from the front among all elements corresponding to the selector

:nth-last-child(n) Selects the element that is the nth child from the last among all elements corresponding to the selector

:nth-child(odd) Selects the odd-numbered child of all elements corresponding to the selector

nth-child(even) Selects the element that is the even-numbered child among all elements corresponding to the selector

Negation selector (Negation pseudo-class)

:not(selector) Selects all elements that do not correspond to the selector

<style>
    /* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
    input:not([type=password]) {
      background: yellow;
    }
  </style>

Pseudo-Element Selector

First letter or first line of element content,

You can use pseudo-element selectors to select the front or back of element content.

::first-letter Selects the first letter of the content

::first-line Selects the first line of content. Applicable only to block elements.

::after Selects the space located after the content. Typically used with the content attribute.

::before Selects the space before the content. Typically used with the content attribute.

::selection Selects the dragged content. Does not work in some browsers, such as iOS Safari.

<style>
    /* p 요소 콘텐츠의 첫글자를 선택 */
    p::first-letter { font-size: 3em; }
    /* p 요소 콘텐츠의 첫줄을 선택 */
    p::first-line   { color: red; }

    /* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::before {
      content: " HTML!!! ";
      color: blue;
    }
    /* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::after {
      content: " CSS3!!!";
      color: red;
    }

    /* 드래그한 콘텐츠를 선택한다 */
    ::selection {
      color: red;
      background: yellow;
    }
  </style>

Reference link

This article summarizes part of the poiemaweb css selector chapter.

rimu

Perfectly imperfect ✨

[html] Inline-element vs block level element

[css] Organizing the position of elements

4 comments

\