CSS Selectors
Before talking about what is CSS, we will take a glimpse HTML. HTML (HyperText Markup Language) is nothing but a code that is used to structure a web page and its content. It is used to tell the web browser what each part of the website is (i.e. Content could be structured within a set of paragraphs, a list of points or using image's and data tables). Here is an examples of HTML Structure:
img 1 
Here in the above example there are some text (i.e." html, body, h1, p"). They are know as tags (start tag and end tag).
img 2 
That was the basic explanation of HTML. HTML is just a structure, to add some styling we require CSS.
Now, how we can add styling to HTML using CSS. It will be done through CSS Selectors. Selectors are nothing but the HTML tags and its attributes (p, div, h1, img etc). Refer img 2 Please refer to the below image
img 3 
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
1.Simple Selectors Simple Selectors are selectors which are selected through tag or element, id attribute, class attribute. let's take an example of each simple selector.
Example (Through tag or element): Here, all p elements on the page will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Example (Through id attribute): The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Example (Through class attribute): The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
2.Combinator selectors A combinator is something that explains the relationship between the selectors. There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendant Selector The descendant selector matches all elements that are descendants of a specified element.
The following example selects all p elements inside div elements Example
div p {
background-color: yellow;
}
Child Selector (>) The child selector selects all elements that are the children of a specified element.
The following example selects all p elements that are children of a div element: Example
div > p {
background-color: yellow;
}
Adjacent Sibling Selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first p element that are placed immediately after div elements: Example
div + p {
background-color: yellow;
}
General Sibling Selector (~) The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all p elements that are next siblings of div elements: Example
div ~ p {
background-color: yellow;
}
3.Pseudo-class selectors
What are Pseudo-classes? A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
There are list of pseudo classes: Examples
:active:first-child:hover:last-child:nth-child:root:target
What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
All CSS Pseudo Elements
1.
::after
2.
::before
3.
::first-letter
4.
::first-line
5.
::selection
5.Attribute selectors
CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute.
The following example selects all elements with a target attribute:
Example
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specified attribute and value.
The following example selects all elements with a target="_blank" attribute:
Example
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] Selector The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
Example
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] Selector The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
Example
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] Selector The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value.
The following example selects all elements with a class attribute value that starts with "top":
Note: The value does not have to be a whole word!
Example
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Selector The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.
The following example selects all elements with a class attribute value that ends with "test":
Note: The value does not have to be a whole word!
[class$="test"] {
background: yellow;
}
CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains "te":
Note: The value does not have to be a whole word!
Example
[class*="te"] {
background: yellow;
}
Thank you.