How to select an HTML element in CSS

For enhancing the appearance of web pages written in HTML or XML, web programmers use CSS rules to beautify their web pages. CSS syntax provides a wide range of selectors to select HTML elements. Selecting HTML elements using CSS selectors will allow the programmer to enhance their websites. In this tutorial, we are going to learn a bunch of CSS selectors with which we can select HTML elements.

CSS Selectors

A selector is a basic CSS rule. These selectors inform the browser to select particular HTML elements and style them in the manner specified.

Syntax:

h2 {
text-align: center;
color: aqua;
}
p {
font-size: 12px;
color: blue;
}

As mentioned already there are a number of selectors provided by CSS which are.

Basic Selectors
Attribute Selector
Combinator Selectors
Type Selector
Pseudo-class Selectors
Pseudo-elements Selectors

Let’s learn about them in detail.

Basic Selectors

This category of selectors consist of some primary CSS selectors.

Element Selector

An element selector is used to select HTML elements on the basis. For example,

h2 {
text-align: center;
color: blue;
}

In the above example the element selector selects <h2> element and sets its color to blue, and aligns the text into the center of the page/container.

Id Selector

Since every element can have a unique id so this selector targets that id to select the element and assign values to its properties. To select an HTML element using its id, we use a hash(#) symbol followed by id.

In the following example, the id selector selects an element with id=“head1” and adjusts its alignment to the left while color to aqua.

#head1 {
text-align: left;
color: aqua;
}

Class Selector

Class selector styles an HTML element on the basis of a specific class attribute. In order to select an HTML element using its class name, we use a dot followed by a class name.

.main {
text-align: left;
margin-top: 3px;
margin-bottom: 3px;
}

Universal Selector

In order to select all elements of an HTML page we make use of a universal selector. It is represented by an asterisk sign (*).

* {
color: beige;
text-align: justify;
}

Grouping Selector

For the purpose of selecting all those elements that you want to select in a similar manner use the grouping selector.

h1, h2, p {
color: black;
text-align: center;
font-family: 'Times New Roman', Times, serif;
}

Attribute Selector

An attribute selector makes use of specific attribute names to select HTML elements.

a [target] {
color: green;
text-align: center;
}

In the above example the selector iis selecting all elements of <a> that have an attribute target. The attribute selector is further divided into different categories. The table below explains them.

Attribute Selectors	Description	Example
[attribute= “value”]	It selects elements having a particular attribute and value.	div[lang=fr]{background-color=red;}
[attribute~= “value”]	It selects elements that have a particular word in their attribute value.	img[title~=“flower”]{border: 2px solid blue}
[attribute\|= “value”]	It selects an element with a particular attribute whose value can be precisely the particular value or the particular value that comes after a hyphen (-).	p[lang\|=en]{font-size: 12px;}
[attribut^= “value”]	It selects elements with attributes with values starting with a particular value.	a[class^= “top”]{background-color:pink;}
[attribute$= “value”]	It selects elements with attributes having a specific ending value.	img[src$=dog.jpg]{border: 2px; solid yellow}
[attribute*= “value”]	It selects an element with attribute value having a particular value.	a[href*=“example”]{color:blue;}

3. Combinator Selectors

In order to combine one or more types of basic CSS selectors we use a combinator selector. There are four types of combinator selectors which are;

Combinator Selectors	Description	Example
Descendant	It selects elements that are descendants of a specific element.	div p { color: blue; }
Child	It selects those elements which are first children of a certain element.	div > p { color: blue; }
Adjacent Sibling	It selects an element that comes immediately after another particular element.	div + p { color: blue; }
General Sibling	It selects all those elements which are next siblings of a particular element.	div ~ p { color: blue; }

4. Type Selectors

Type selectors are used in CSS when you want to select all elements of a particular type in a document. For example.

span {
background-color: blue;
}

5. Pseudo-class Selectors

Pseudo-class selectors are used when you want to describe a particular state of an element. Different pseudo-classes are.

Pseudo-Classes	Description	Example
:link	It styles a link that has not been visited yet.	a:link { color: aqua;}
:visited	It styles a link that has already been visited.	a:visited { color: green;}
:hover	It styles an element when mouse hovers on it.	a:hover {color: pink}
:acitve	It styles an active link.	a:active {color: blue;}
:focus	It is used to style elements with focus.	p:focus {background-color: purple;}
:first-child	It is used to style the first child of a specific element.	p:first-child {color: blue;}
:last-child	It matches all those element that is the last child of its parent.	p:last-child {font-size: 6px;}
:lang	It specifies the language of a particular element.	q:lang(eng) {quotes: “-” “-”;}

6. Pseudo-elements Selectors

In order to style some specific parts of a element pseudo-elements are used. Pseudo-elements are as follows;

Pseudo-elements	Description	Example
::first-line	It is used to style the first line of a text.	p::first-line{font-size: 6px: color: red;}
::first-letter	It is used to style the first letter of a text.	p::first-letter{font-weight: 7px; color: blue;}
::before	It adds content before an element.	p::before{img= “flower.jpg”;}
::after	It adds content after an element.	p::after {img= “flower.jpg”;}
::marker	It is used to style markers of a list.	::marker {color: red; font-weight: 2px;}
::selection	It is used to style selected part of an element.	::selection {background-color: blue; font-size: 2px;}

Conclusion

To select an HTML element in CSS, CSS provides selectors to inform the browser to select particular HTML elements and style them in the manner specified. CSS provides numerous selectors. Here we have given a list of some: Basic Selectors, Attribute Selector, Type Selector, Combinator Selectors, Pseudo-class Selectors, Pseudo-elements Selectors. In this tutorial, we explored various categories of CSS selectors and how to how to use them.