Dahye Ji

Posted on Nov 5, 2021 • Edited on Nov 6, 2021

CSS basic 2 - Selector, selector priority

#css #selector #attribute #pseudoclass

Universal Selector

* {
  margin: 0;
  padding: 0;
}

Type/Tag Selector

body {
    background-color: red;
    /* property */  /* value */
}
<!- you can select multiple tags using , ->
 h2,
 h3,
 h4,
 p {
   color: blue;
 }

Class Selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selector - class</title>
    <style>
        .one {
            color: aqua;
        }

        .two {
            border: solid 1px black;
            border-top-color: red;
        }

        .three {
            font-size: 48px;
        }
    </style>
</head>

<body>
    <!-- it can have multiple classes but cannot have more than one id. -->
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1 class="one">Hello World</h1>
    <h1 class="two three">Hello World</h1>
    <h1 class="two">Hello World</h1>
</body>

</html>

Id Selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selector - id</title>
    <style>
        #one {
            color: aqua
        }

        #two {
            border: solid 1px black;
        }

        #three {
            font-size: 48px;
        }
    </style>
</head>

<body>
    <!-- elements cannot have more than one id 
         there can be multiple classes but not id!
         usually use class for styling and id for js -->

    <!-- a href="#one": go to the place where id one is at -->
    <a href="#one">클릭하시오</a>

    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1 id="one">Hello World</h1>
    <h1 id="two">Hello World</h1>
    <h1 id="three">Hello World</h1>

</body>

</html>

Children Selector, nested tag selecting

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selector - child selector </title>
    <style>
        /* this selects all p tags that are nested inside ul */
        ul p {
            color: red;
        }

        /* > (child selector)
        > selects nodes that are direct children of the first element. 
        ul > li will match all <li> elements that are **nested directly** inside a <ul> element. */

        /* this selects p tag nested in li */
        li>p {
            color: blue;
        }
    </style>
</head>


<body>
    <ul>
        <li>
            <p>Hello World</p>
        </li>
        <li>
            <div>
                <div>
                    <div>
                        <p>Hello World</p>
                    </div>
                </div>
            </div>
        </li>
        <li>Hello World</li>
        <li>Hello World</li>
    </ul>
</body>

</html>

Adjacent Sibling Selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selector - adjacent sibling selector</title>
    <style>
        /* + matches the second element only if it immediately follows the first element. */

        /* this selects the first ul that is placed immediately after h1 */
        h1+ul {
            color: red;
        }

        /* this selects the second ul after h1 */

        h1+ul+ul {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>hello world</h1>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>

</html>

General Sibling Selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selector - general sibling selector</title>
    <style>
        /* ~ selects siblings.
        This means that the second element follows the first (though not necessarily immediately),and both share the same parent. 
        Selects every <ul> element that is preceded by a <h1> element. */
        h1~ul {
            color: red;
        }
    </style>
</head>

<body>
    <h1>hello world</h1>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>

</html>

Confusing Selectors ( difference between .one.two and .one .two)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>confusing selectors</title>
    <style>
        /* .(class) without space : selecting both class */
        .one.two {
            color: blue;
        }

        /* class two nested in class one */
        .one .two {
            color: red;
        }
    </style>
</head>

<body>
    <!-- .one -->
    <div class="one">Hello World</div>
    <!-- .one.two -->
    <div class="one two">Hello World</div>
    <!-- .one .two -->
    <div class="one">
        <div class="two">Hello World</div>
    </div>
</body>

</html>

Attribute selector

Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr*=value] [attr|=value] [attr^=value] [attr$=value]

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS attribute selector</title>
    <style>
        /* <a> elements with a href attribute */
        a[href] {
            font-size: 32px;
        }

        /* <a> elements with an href matching "http://www.codingisfun.com" */
        a[href="http://www.codingisfun.com"] {
            font-size: 48px;
        }
    </style>
</head>

<body>
    <a href="#">클릭해!</a>
    <a href="http://www.codingisfun.com">클릭해!</a>
    <a href="#">클릭해!</a>
</body>

</html>

Attribute Selector 2

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector 2</title>
    <style>
        p::after {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url(https://e1.pngegg.com/pngimages/635/155/png-clipart-emoji-sticker-three-yellow-stars-illustration-thumbnail.png);
            background-size: cover;
        }


        /* 1. tag[attribute] */
        /* selecting tag by attribute name */

        /* select div that has class attribute */
        div[class] {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        /* select a tag that has href attribute */
        a[href] {
            color: gray;
        }

        /* 2. tag[attribute="value"] */
        /* select div that has class named red*/
        /* It doesn't include space. So, it's only for selector with class named red. (if it has multiple classes, there's space so this is for the one with one class name)*/
        /* div[class="red"] {
            background-color: red;
        } */


        /* 3. tag[attribute~="value"] */
        /* select div that has class named red */
        /* it includes space. so this will select every dv that's class="red" */
        /* for example, if it has class="red blue green", it selects it but if it has class="redbluegreen", it doesn't select it */
        /* div[class~="red"] {
            background-color: red;
        } */

        /* or you can also select things with other attribute as well */ 
        /*  
        img[alt~="dog_pic"] {
            width: 200px;
            text-decoration: none;
            border: 5px solid seagreen;

        } */

        /* 4. tag[attribute*="value"] */
        /* select div that element includes a class that has value of "red"
        /* if it has class="redbulegreen", even if it's not exactly "red" but it includes text "red", it gets selected */
        /* div[class*="red"] {
            background-color: red;
        } */

        /* 5. tag[attribute^="value"] */
        /* select div that has a class and the value starts with "sky" */ 
        /* div[class^="sky"] {
            background-color: skyblue;
        } */
        /* select a that the value of href starts with "http" */
        /* a[href^="https"] {
            color: red;
        } */

        /* 6. tag[attribute$="value"] */
        /* select div that has class and the value ends with "pink"*/
        /* div[class$="pink"] {
            background-color: pink;
        } */

        /* select a that the value of href ends with "kr" */
        /* a[href$="kr"] {
            color: black;
        } */

        /* 6. tag[attribute|="value"] */
        /* select a that the value of href is http or starts with "http" */

        /* 
           언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며,
           독립된 값이거나 하이픈을 포함하는 값은 선택됩니다.
         */
        /* a[href|="http"] {
            color: red;
        } */
    </style>
</head>

<body>
    <!-- 팁 1 -->
    <!-- 실무에서는 주로 이런식으로 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다고 보시면 됩니다. -->
    <p>안녕하세요 찡긋~ </p>

    <!-- 보강설명 2 -->
    <!-- class 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <div>1</div>

    <div class="red">2</div>
    <div class="red pink">3</div>
    <div class="redpink skyblue pink">4</div>
    <div class="skyblue">5</div>

    <hr>

    <!-- href 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <a></a>

    <a href="http://paullab.co.kr">바울랩1</a>
    <a href="http://paullab.com">바울랩2</a>
    <a href="https://paullab.com">바울랩3</a>
    <a href="http">바울랩4</a>
    <a href="http-paullab">바울랩5</a>
</body>

</html>

Pseudo Class, Pseudo Selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS pseudo-classes selector 가상 클래스 선택자</title>
    <style>
        /* like
 a:hover { } p:nth-child(1) , these are unexisting class in htmml but it behaves like it has actual class. So it's called pseudo-classes selector
        */

        /* .foo:nth-child(odd) {
            color: red;
        }
        * .foo:nth-child(even) {
            color: red;
        }
        .foo:nth-child(3) {
            color: red;
        } */
        /* .foo:nth-child(2n+1) {
            color: red;
        } */


        /* 
        .foo:first-child :
        select the first child of element that has class="foo"
        .foo:last-child :
        select the last child of element that has class="foo"
        .foo:nth-child(n) :
        select the nth child of element that has class="foo"
        .foo:nth-child(odd) :
        select the nth child(where n is odd number) of element that has class="foo"
        .foo:nth-child(even) :
        select the nth child(where n is even number) of element that has class="foo"
        .foo:nth-child(3n+1) :
        select the first child of element that has class="foo" and select every 3rd children from there

        2n(every second) 
        2n+1 (every third from 1) */


        .foo:nth-child(2n+1) {
            color: red;
        }

        /* .foo:nth-child(3n+1) {
            color: red;
        } */
    </style>
</head>

<body>
    <ul>
        <li class="foo">1</li> <!-- .foo:first-child -->
        <li class="foo">2</li>
        <li class="foo">3</li> <!-- .foo:nth-child(3) -->
        <li class="foo">4</li>
        <li class="foo">5</li> <!-- .foo:last-child -->
        <li class="foo">6</li>
        <li class="foo">7</li>
        <li class="foo">8</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상요소 선택자</title>
    <style>
        /* 
        ::after creates a pseudo(가상)-element that is the last child of the selected element.
        It is often used to add cosmetic content to an element with the content property.
        It is inline by default. */
        /* These are pseudo elements so cannot be selected when you try to drag on the browser */
        /* do not include important data or info in pseudo element, mainly used for styling or something that isn't important */
        p::after {
            content: 'cm'
        }

        p::before {
            content: '!!'
        }

        /* after 예시!
        실무에서는 주로 이런식으로 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용! */
        p::after {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url(https://e1.pngegg.com/pngimages/635/155/png-clipart-emoji-sticker-three-yellow-stars-illustration-thumbnail.png);
            background-size: cover;
        }
    </style>
</head>

<body>
    <p>10</p>
</body>

</html>

Selector priority

id > class > tag

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>selector priority</title>
    <style>
        /* 
        id > class > tag
        - inline-style : 요소의 안에 속성으로 선언되는 스타일입니다. 1000 점의 가중치를 가집니다.
        - id : id 선택자는 100점의 가중치를 가집니다.
        - class, 가상클래스 선택자 : class, 가상클래스 선택자는 10점의 가중치를 가집니다.
        - 요소, 가상요소 선택자 : 요소, 가상요소 선택자는 1점의 가중치를 가집니다. */
        /* DO NOT USE !important. It's a bad practice! */
        h1 {
            color: red
        }

        .yellowgreen {
            color: yellowgreen
        }

        #four {
            color: skyblue
        }
    </style>
</head>

<body>
    <h1>h1의 첫번째</h1>
    <h1 id='two' class='yellowgreen'>h1의 두번째</h1>
    <h1 id='three' class='yellowgreen'>h1의 세번째</h1>
    <h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>

</html>

Shadow DOM

How to check shadow DOM?

Go to developer's tool
Click the setting button
Go to preferences - Elements
Check on 'Show user agent and shadow DOM'

more about Shadow DOM

Enabled, Disabled

/* The :enabled CSS pseudo-class represents any enabled element.
An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
The element also has a disabled state, in which it can't be activated or accept focus. */

input:enabled {
   color: blue;
}

input:enabled+span {
  color: blue;
}

input:disabled+span {
  color: red;
}

label+input:checked+span {
  color: green;
}

Not selector

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>not selector</title>
    <style>
        /* except the class named one */
        li:not(.one) {
            color: red;
        }
    </style>
</head>

<body>
    <!-- ul>li.one*5 -->
    <ul>
        <li class="one">hello</li>
        <li class="one">hello</li>
        <li class="two">hello</li>
        <li class="one">hello</li>
        <li class="one">hello</li>
    </ul>
</body>

</html>

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

DEV Community

CSS basic 2 - Selector, selector priority

Universal Selector

Type/Tag Selector

Class Selector

Id Selector

Children Selector, nested tag selecting

Adjacent Sibling Selector

General Sibling Selector

Confusing Selectors ( difference between .one.two and .one .two)

Attribute selector

Attribute Selector 2

Pseudo Class, Pseudo Selector

Selector priority

Shadow DOM

How to check shadow DOM?

Enabled, Disabled

Not selector

How to reduce TTFB

Top comments (0)

See why 4M developers consider Sentry, “not bad.”

Read next

Version Control Strategies (Gitflow)

Node.js vs Django: A Comprehensive Comparison

Exploring the Synergy Between Cyberwarfare and OSINT

Elon Musk’s Open Source Licensing Model: A New Frontier in Innovation

Okay