The following is a list of the most common and well-supported CSS selectors. There are many, many more, but these are the ones you should know well.

Element Type Selectors

The most basic CSS selectors are Element Type Selectors. That's a fancy name for simply using an HTML tag, without the angle braces.

We've used this selector extensively already.

For example, if we wanted to make all paragraphs have green text, we would use the following CSS rule:

________0

---

Descendant Selectors

Match an element that is a descendant of another element.

This uses two separate selectors, separated by a space.

For example, if we wanted all emphasized text in our paragraphs to be green text, we would use the following CSS rule:

p em { color: green; }

0

---

Class Selectors

Match an element that has the specified class.

To match a specific

p em { color: green; }

1 attribute, we always start the selector with a period, to signify that we are looking for a

p em { color: green; }

1 value. The period is followed by theclassattribute value we want to match.

For example, if we wanted all elements with a class of "highlight" to have a different background color, we would use the following CSS rule:

p em { color: green; }

3

---

Id Selectors

Match an element that has the specified id.

To match a specific

p em { color: green; }

4 attribute, we always start the selector with a hash symbol (#), to signify that we are looking for an

p em { color: green; }

4 value. The hash is followed by theidattribute value we want to match. Remember, we can only use the same

p em { color: green; }

4 attribute value once, so the id selector will always only match one element in our document.

For example, if we wanted the element with an id of "content", we would use the following CSS rule:

p em { color: green; }

7

---

Child selectors

Match an element that is an immediate child of another element.

For example, if we wanted all emphasized text in our paragraphs's to have green text, but not emphasized text in other elements, we would use the following CSS rule:

p em { color: green; }

8

Note: This selector does not work in Internet Explorer 6

---

Adjacent sibling selectors

Match an element that is immediately after another element, but not a child of it.

For example, if we wanted all paragraphs that immediately followed an h4 to have green text, but not other paragraphs, we would use the following CSS rule:

p em { color: green; }

9

Note: This selector does not work in Internet Explorer 6

---

Pseudo Selectors

An Aside About Link States

Anchor elements are special. You can style the element with an Element Type Selector, but it might not do exactly what you expect. This is because links have different states, that relate to how they are interacted with. The four primary states of a link are: link, visited, hover, active.

Pseudo selectors come in different sizes and shapes. By far the most common pseudo selectors are used to style our links. There are four different pseudo selectors to be used in conjunction with links:

:linkA link that has not been previously visited (visited is defined by the browser history):visitedA link that has been visited:hoverA link that the mouse cursor is "hovering" over:activeA link that is currently being clicked

.highlight { background-color: #ffcccc; }

0

For reasons of browser compatibility, you should always specify the pseudo selectors in this order. An easy way to remember this is by using the mnemonic: "LoVe HA!".

Note: Touch screen devices do not have a hover state. See No Hover by Trent Walton for more information regarding this interesting usability quandary.

You can read more about the other types of pseudo selectors on the sitepoint page.

---

Universal Selector

Matches every element on the page.

For example, if we wanted every element to have a solid 1px wide border, we would use the following CSS rule:

.highlight { background-color: #ffcccc; }

1

For reasons that are likely obvious after the previous example, you should be careful with universal selectors. When might you want to use them?

The answer is, not often. But an example would be to set the margins and padding for all elements on the page to zero. We'll learn a better way to do this shortly.

The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

So the CSS might look something like:

#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

Link To Us! If you've found HTML Dog useful, please consider linking to us.

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

id="top">

Chocolate curry

class="intro">This is my recipe for making curry purely with chocolate

class="intro">Mmm mm mmmmm

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that have the class “jam”.

Apa itu ID dalam CSS?

ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue} .

Apa itu class dan ID?

Halo, simpelnya ID dan Class itu seperti identitas dan kelompok. Setiap element pasti punya identitas yang berbeda, sprti nik penduduk yang berbeda2 setiap orang. Sedangkan Class adalah kelompok, setiap element boleh punya lebih dari satu kelompok.

Apa itu ID dalam HTML?

Mengenal Id di HTML Atribut id berfungsi untuk menentukan identitas unik suatu elemen. Jadi nilai yang diberikan haruslah unik, unik di sini artinya kita tidak diizinkan membuat lebih dari satu id dengan nilai yang sama. Atribut id sering digunakan untuk menunjuk ke nama id pada lembar gaya (style sheet).

Apa yang dimaksud selector id?

3. Selector ID Salah satu atribut dalam HTML yang dapat digunakan sebagai selector adalah atribut 'id'. Nantinya, id dari elemen tersebut memiliki sifat yang unik dalam suatu laman, jadi jenis penyeleksi ini sering digunakan untuk memilih satu elemen unik.