#webdevelopment #frontenddelopment#CSS #CSSselectors#CSSselectorsrules

CSS Selectors is in one of the essential skills every developer must know and understand the concepts, because it's enable you to target a specific HTML element and enable you to style it in correct order. In this article I will be writing on CSS selectors and with their example for a better understanding of CSS selectors concepts.

what is CSS selector?

A CSS selector selects the HTML element to style. They are used to find and select HTML element. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

Types of selectors

CSS selectors can be categorize into (5) categories;

Simple selectors.
Combination selectors.
Pseudo-class selectors.
Pseudo-element selectors.
Attribute selectors.

1.simple selectors : This are use to find and select HTML elements based on name of the HTML tag, class and id.

Element selectors: The Element of an HTML element can be styled by just naming it in the CSS file e.g p { text-transform: capitalize; } and the style will be declared inside the curly bracket as shown.

Id selectors: The id selector is used to select id attributes in an HTML file. The id attribute is unique within a page, therefore, An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element e.g styling the attribute with id="id-selectors" in css by

#id-selectors{
  text-align: center;
  color: green;
}.

Note: An id name cannot start with a number!.

Class selectors: The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name. e.g styling an HTML element with attribute class="class-selectors" is done on CSS by

.class-selectors {
  text-align: right;
  color: blue;
}

Note: A class name cannot start with a number!.

The CSS Universal Selector The universal selector (*) selects all HTML elements on the page. And it affects all the HTML elements in a page.

Example:

*{
padding:0;
marging:0;
}

2.Combination selectors: This is a selectors that select HTML elements based on specific relationships between them. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

i. Descendant selector (space). E.g

div p {
  background-color: green;
}

ii. Child selector (>). Example:

div > p {
  background-color: green;
}

iii. Adjacent sibling selector (+). Example:

div + p {
  background-color: green;
}

iv. General sibling selector (~). Example:

div ~ p {
  background-color: yellow;
}.

This is a short explanation for combination selectors, you can check my article on combination selectors for more understanding of the concepts combination selectors.

3.Pseudo-class selectors: pseudo-class selectors is used to define a definite and special state of an element. Examples: I. Styling a link when it's visited and unvisited ii. Styling a links when it's active and so on The style can be done on the format below:

Selectors:pseudo-class{
property: value;
}.

Example:

a:hover{
background-color:blue;
}.

I also have a comprehensive article on pseudo-class selectors, you can check it for more understanding of the concepts.

4.Pseudo-elements selectors: pseudo-elements selectors is used to style a particular part of an element. Examples:

I. Styling the first letter of an element. ii. Styling the first line of an element. The syntax format is has shown below:

Selectors::pseudo-elements{
property: value;
} 
Example:
p::first-line {
  color: blue;
 }.

You can also check my other article on pseudo-elements selectors.

5.Attributes selectors :Attributes selectors selects element based on an attributes or attributes value of the element. The syntax format for styling elements using Attributes selectors goes as shown below:

Elements[attributes/attributes value]{
property: value;
}

Examples:
a[target="_blank"]{
color: blue;
}

This is a brief explanation on CSS selectors, you can check my other articles for a more comprehensive explanation of each of the above explained categories of CSS selectors.

Selectors in CSS