--- title: "CSS Selectors Complete Tutorial" url: https://weworkworldwide.com/tutorials/css-selectors-complete-tutorial-3/ description: "In order to apply a CSS style to an element or a bunch of elements all together, first and foremost we need to select them! There are different types of Se" date: 2026-07-08T09:00:27+00:00 source: https://weworkworldwide.com/llms.txt --- # CSS Selectors Complete Tutorial ``` line-numbers ``` In order to apply a CSS style to an element or a bunch of elements all together, first and foremost we need to select them! There are different types of Selector that we can use to select the target element/s. - Universal Selector= *{ }: ``` line-numbers ``` Any declaration we do within the declaration block of this type of selector, will applied to all elements within a page. Example: ``` line-numbers CSS is fun :)

A simple paragraph is comprised of three major components. The first sentence, which is often a declarative sentence, is called the “topic sentence.”

``` In the example above, the entire webpage elements including and will have double border around their content. - Type Selector element-name { }= h1 { }, p { }, form { }, input { } etc. Type Selector is used to format the element or elements that we declared in the selector (can be one type or multiple types each separated by comma). Example: ``` line-numbers CSS is fun :)

This is for test

A simple paragraph is comprised of three major components. The first sentence, which is often a declarative sentence, is called the “topic sentence.”

``` In the example above I have set the selector to multiple different types and as the result, every declared type has a double border around their content. - Class Selector: ``` line-numbers Example: .class-name { }, .animal { }, .cat { }, .animal, .cat { } etc. Using this type of selector we can format multiple elements based on their class attribute's value. We can also add multiple class names to the selector then format all those elements that have one or more of these values for the value of their class attribute. (Use comma separator to separate each class-name from the other when you have multiple class-name in your selector) ``` Note: class name prefixed with dot. Example: ``` line-numbers CSS is fun :)

Cat Donkey Apple

``` -In the example above those elements that have “animal” as their class’s value, have double line border around their content. -Those elements that have “cat” as their class’s value, their background color are red. -Those elements that have “vegetable” as their class’s value have green color set as the background. You can see one of the elements in the example above has 2 value for its class attribute and as the result, this element has a double line border and red background. - ID Selector: ``` line-numbers Example: #id-name { }, #introduction { }, #final-quote { } etc. We can use element's id in order to select it and format it in the way we want. You can add multiple ids to the selector and apply the style you want on all of them. (Use comma separator to separate each id from the other for example: #id1, #id2{ }) ``` Note: ID name is prefixed with # sign. Example: ``` line-numbers CSS is fun :)

In an essay, article, or book, an introduction is a beginning section which states the purpose and goals of the following writing. This is generally followed by the body and conclusion. The introduction typically describes the scope of the document and gives the brief explanation or summary of the document.

``` Another type of selector is “element.class” (there’s no space between element and class) Examples: p.animal { }, li.internal { }, ul.nav { } etc. The target of this type of selector is those elements that have the specified class name. Example: ``` line-numbers CSS is fun :)

Love

Love encompasses a range of strong and positive emotional and mental states, from the most sublime virtue or good habit, the deepest interpersonal affection and to the simplest pleasure.

Laugh

Laughter is a physical reaction in humans consisting usually of rhythmical, often audible contractions of the diaphragm and other parts of the respiratory system resulting most commonly in forms of "hee-hee" or "ha-ha". It is a response to certain external or internal stimuli.

``` In the example above only the first

element will have a red color background and double line border because it has a class attribute with the value of “title”. The last type of selector for this section is: .class1.class2 (there’s no space in between) Examples: .animal.cat { }, .vegetable.apple { } etc. the target of this type of selector are those that have BOTH of the specified class name. Example: ``` line-numbers CSS is fun :)
This is a dog

This is a cat

This is an apple

This is a Carrot
``` In the example above only those elements that have both “animal” and “cat” for their class attribute’s value, will have yellow color for the background. Also those elements that have “vegetable” and “apple” as their class attribute’s value will have green color for the background. In the later sections you’ll see more selector types.