css 03 - selector css

Selector Elemen

<p> memilih elemen berdasarkan nama elemen misalnya memilih semua elemen p

                    p {
                        color: red;
                    }

Selector ID

<div id="header"> memilih elemen berdasarkan nama id mereka misalnya #header

                    #header {
                        color: red;
                    }

Selector class

<div class="body"> memilih elemen berdasarkan class mereka misalnya .body

                    .body {
                        color: red;
                    }

Selector potongan elemen

<ul> <li> memilih elemen li di dalam elemen ul. missalnya ul li

                    ul li {
                        color: red;
                    }
                    .header .header-title {
                        color: red;
                    }

Selector anak langsung

<ul> <li> memilih elemen li yang merupakan anak langsung dari elemen ul. misalnya ul > li

                    ul > li {
                        color: red;
                    }
                    .header > .body {
                        color: red;
                    }

Selector pesudo class

<p> elemen memilih elemen berdasarkan statusnya, seperti saat di hover, di klik, atau difokuskan. misalnya p:hover

                    p:hover {
                        color: red;
                    }
                    p:active {
                        color: red;
                    }
                    p:focus {
                        color: red;
                    }

Selector pesudo elemen

<p> memungkinkan kamu menambahkan konten sebelum atau setelah isi elemen. misalnya p::before

                    p::before {
                        content: "<-";
                    }
                    p::after {
                        content: "->";
                    }

selector bersaudara

<h2> <p> memilih elemen p yang berada langsung setelah elemen h2 (semua elemen p yang ada di h2). misalnya h2 + p

                    h2 + p {
                        color: red;
                    }
                    h2 - p {
                        color: red;
                    }

selector universal

semua elemen memilih semua elemen. misalnya *

                    * {
                        margin: 0px;
                        box-sizing: border-box;
                    }

selector :nth-child

:nth-child(N) memilih elemen ke-N dalam hireki orang tua. misalnya ul li:nth-child(odd)

                    ul lo:nth-child(odd) {
                        background-color: lightgrey;
                    }
                    ul lo:nth-child(even) {
                        background-color: lightblue;
                    }
                    ul lo:nth-child(3) {
                        background-color: red;
                    }

selector elemen berdasarkan atribut

input[type="text"] memilih elemen input dengan type text. misalnya input[type="text"]

                    input[type="text" {
                        background-color: lightgrey;
                    }
                    img[src="/image/1.jpg"] {
                        background-color: lightblue;
                    }