In CSS selectors are used to select the element or classes or id’s you want to style, There are many different types of CSS selectors, each with their own unique syntax. These tell the browser which elements to apply CSS property values to.
There main five main categories of Selector;
1.Simple selectors
2. Combinator selectors
3.Attribute selectors
4.Pseudo-class selectors
5.Pseudo-elements selectors
1. Simple selectors selects elements based on name id, class
Styled-components is a library that allows you to use component-level styles in your React and React Native application that are written with the combination of JavaScript and CSS.
By the use of styled-components, React developers can write plain CSS inside your JavaScript code in React components.
1.Element selector:
In this type selector selects HTML elements based on the element name that is HTML tag name
Eg:
h1{
text-align: center;
color: blue;
}
In this example all <h1> elements on the page will be aligned to center with a blue text color
2. ID Selector:
In this type selector lets you apply styling to all specified elements with a selected id. Id is used uniquely in
the HTML so by using this selector we can apply styles only to that particular unique element.
Eg:
#paragraph {
line-height: 20px;
color:whitesmoke;
}
In this example line-height of 20px and whitesmoke text color will get applied to the element which has id as paragraph
3. Class selector:
In this type selector applies styles as per class name. In HTML multiple elements can have the same class so
by using this selector we can target all those elements to apply similar styles on them.
Eg:
.banner{
padding:25px;
color:gray;
}
In this example padding of 25px and gray color will be applied to all the elements which has class as banner
2.Combinator Selectors:
Combinator is the bridge between selectors. It is used to explain the relationship between selectors.
There can be more than one simple selector in a CSS selector. A combinator can be inserted between the simple selectors.
There are four different combinator selectors possible –
1.Descendant Selector (space): Descendants of an element are matched by this selector. Here space is used as the combinator.
2.Child Selector (>): The child selector selects all childrens of a specified element.Here > is used as the combinator.
3.Adjacent Sibling Selector (+): The adjacent selector is used to select adjacent element or one element that is immediately following another.Here + is used as the combinator
4. General Sibling Selector(~): All the elements that are next siblings of a specified element are selected by the general sibling selector
3. Attribute Selector:
Elements containing specified attribute values can also be styled. To select elements with a specific value, An attribute selector is used to select any element with a specific attribute or value. This is a great way to style HTML elements by grouping them based on some specific features, and the feature selector will select elements with similar elements.
Syntax:-
[attr]
Represents elements with an attribute name of attr.
[attr=value]
Represents elements with an attribute name of attr whose value is exactly value.
[attr~=value]
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
[attr|=value]
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen
[attr^=value]
Represents elements with an attribute name of attr whose value is preceded by value.
[attr$=value]
Represents elements with an attribute name of attr whose value is followed by value.
[attr*=value]
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
4.Pseudo Classes:
A pseudo-class is used to define a special state of an element.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Basically pseudo classes set the style of an element when the element is in a particular special state. Pseudo-class names are not case-sensitive.
Pseudo classes are predefined classes which are used for targeting different HTML elements, Pseudo classes can be can be categorised in many categories such as
1.Structural
2.Linguistic
3. Location
4.Input
5.User action
There are different types of pseudo classes
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 of Pseudo class is as follows:
selector:pseudo-class {
property: value;
}
here are some examples of pseudo classes
1.Visited link
a:visited {
color: #00FF00;
}
2.Mouse hover
a:hover{
color: #FF00FF;
}
:checked – Selects every checked <input> element.
:disabled – Selects every disabled <input> element.
:empty – Selects a specified element that has no children.
:enabled – Selects every enabled <input> element.
:first-child – Selects a specified element that is the first child of its parent.
:first-of-type – Selects every specified element that is the first specified element of its parent.
:focus – Selects <input> element that has focus.
5. CSS Pseudo-elements:
SS pseudo-element is used to change specified part of an element, and it can also be used to change the first letter of a word, or other changes which can cause the user to pay more attention to a letter or a line, an example of the changes that can be made is mentioned in the following.
Syntax of Pseudo Element is as follows
selector::pseudo-element{
property:value;
}
eg:
p::first-line{
color:#ff0000;
font-variant:small-caps;
}
The ::first-line pseudo-element can only be applied to block-level elements.
Following are few more examples of pseudo elements :
::before- Insert content before an element.
::after – Insert content after an element.
::first-letter – Selects the first letter of an element.
::selection – It selects the portion that is selected by a user.
