DEV Community

Dahye Ji
Dahye Ji

Posted on • Updated on

CSS basic 2 - Selector, selector priority

#css #selector #attribute #pseudoclass

Universal Selector 

* {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

Type/Tag Selector 

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
<!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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Shadow DOM

How to check shadow DOM?

  1. Go to developer's tool
  2. Click the setting button
  3. Go to preferences - Elements
  4. 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;
}
Enter fullscreen mode Exit fullscreen mode 
input:enabled+span {
  color: blue;
}

input:disabled+span {
  color: red;
}

label+input:checked+span {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ashcode98 profile image

Day 5 of #100DaysOFCode

Ashish Prajapati -

codevsom profile image

Front End Challenge 2024 Earth Day Edition🌎CSS ART SUBMISSION: "Plants: The Heart of Our Planet"

Somnath Pan -

algoorgoal profile image

🧱Next.js 14에 Pretendard 폰트 적용하기

Chan -

olatunjiayodel9 profile image

CSS code for an Earth Day Celebration Landing Page

Olatunji Ayodele Abidemi -