Table of contents
Introduction
While styling our webpages we make use of CSS which selects/finds different sections in the structure of the HTML through various selectors. These selectors target the specific section of the element for the styling, which then can be given required specifications by adjusting properties.
We have a number of tags representing sections and elements and many are assigned attributes too that define feature, actions, nature etc for these elements. Since the webpages are highly detailed they are filled with elements that are similar to each other and may be overwritten in the style-sheet which may result in error while applying those properties.
To avoid such mix-up we are provided with different types of selectors that can specifically select the target element and thus enable us to style the webpage more eloquently making it easier to read and to work with.
Categories of Selectors:
Simple Selectors These are the selectors that target elements based on their Name, Class or ID.
Combinator Selectors Select elements based on a specific relationship between them.
Pseudo-Class Selectors Select elements based on a certain state.
Pseudo-Element Selectors Select and style a part of an element.
Attribute Selectors Select elements based on an attribute or attribute value.
Simple Selectors
(a) Element Selector
The element selector targets the elements by their element-tags. i.e.
div {property: value; }
The above syntax targets div element ( <div>...</div>)
To select multiple elements to have the same properties, we can put a comma and target multiple elements at the same time, which is referred to as Grouping.
div, p {property: value;}
The above syntax targets p-element along with the div-element. Similarly different types of these simple selectors can also be brought together while grouping in the similar fashion.
(b) Id Selector
Selectors that target the element by naming their id-attribute in place of the element in the selector. We can distinguish the id-selector by the '#' placed in front of the id selector tag. i.e.
#container {property: value;}
The above syntax targets element with id-attribute set to 'container1' ( <div id=container1>...</div>)
Though Id of an element may include a number it cannot start with a number.
(c) Class Selector
These selectors target the elements with their class-attribute value with a "."(dot) followed by the class-value. i.e.
.center {property: value;}
The syntax targets element with class-attribute set to 'center' ( <div class=center>...</div>)
Note:Class of an element cannot start with a number.
Sometimes when we need to select a specific element with a particular class and not disturb other similar elements with same class we can do so with the Class selector with the following syntax;
p.marked {property: value;}
The above class-selector targets only 'p' elements having class='marked' without disturbing other 'p' elements
without the specified class.
(d) Universal Selector
Some of the CSS properties need to be applied to all the elements all-together such as font-style or color etc. For such instances the 'Universal selector' is used which is denoted by a star (*) mark that selects all. i.e.
* {property: value;}
Use of universal selector helps to make the page more uniform regarding some properties that are to remain same for all the elements.
Combinator-Selectors
While working with webpages often we are to encounter complex element structures with layers of elements, parent-elements, sibling-elements, child-elements, grand-child-elements(lol) and many more. To counter such complexities we can always use different Combinators such as;
(a) Adjacent Sibling Selector
Using an Add(+) sign between the two siblings we can make changes to both of them at the same time.
/* file.html */
<div>
<p>...</p>
<p>...</p>
<h4>...</h4>
<p>...</p>
</div>
/* file.css */
p + p {property: value;}
The above syntax would target the two adjacent 'p' elements and leave the alternate 'p' element undisturbed. It selects the
element that is followed by another
element.
(b) General Sibling Selector
The General Sibling Selector is very similar to the Adjacent-Sibling-Selector the only difference is that the element being selected doesn’t need to be the immediate successor to the first element, but can appear anywhere after it.
/* file.html */
<div>
<p>...</p>
<p>...</p>
<h4>...</h4>
<p>...</p>
</div>
/* file.css */
p ~ p {property: value;}
In the above example, last
element will be selected by p ~ p as well, because it is preceded by another
element, even though not directly.
(c) Child Selector
This selector will only select list items that are direct children of an element. It only targets one level down the markup structure & will not target elements nested further down. The nested children of it will not be targeted by this selector. To target the descendant we put "greater than" sign(>) between the parent element and the child element.
/* file.html */
<div>
<p>first</p>
<p>second</p>
<div>...</div>
<p>child of second</p>
<p>third</p>
</div>
/* file.css */
div>p {property: value;}
The above example will select only "first, second & third" <p> elements and the nested child of second <p> element will not be affected as it is not considered a direct child of the target <div> element.
(d) Descendant Selector
The Descendant selector will select any list items that are anywhere underneath the target element in the structure. The item could be nested down two-three levels within the element. To target the descendant we put "space" between the parent element and the child element.
/* file.html */
<div>
<p>first</p>
<p>second</p>
<div>...</div>
<p>child of second</p>
<p>third</p>
</div>
/* file.css */
div p {property: value;}
The above example will select not only "first, second & third" <p> elements but the nested child of second <p> element will also be targeted as it is the descendant of the target <div> element.
Pseudo-Class Selectors
A pseudo-class is used to bring about changes to a special state of an element. It can be used to: Style an element when a pointer moves over it, clicks it or visits, it treats these actions differently to style.
/* link assigned to an anchor tag <a>...</a> */
a:link { color: #FF0000; }
a:visited { color: #00FF00; }
a:hover { color: #FF00FF; }
a:active { color: #00FF00; }
Here by using pseudo-class the color of the link will change with the action.
The order must not change in the CSS definition in order to be effective!
Some Other Pseudo Elements:
- element:enabled
e.g. input:enabled selects every enabled <input> element
- element:first-of-type
e.g. p:first-of-type selects every <p> element that is the first <p> element of its parent
- element:nth-child(n)
e.g. p:nth-child(2) selects every <p> element that is the second child of its parent
Pseudo-Elements Selectors
To target and style specified parts of an element without changing the other items, pseudo selector is used. It can be used for styling the first letter or line of an element, insert content before or after the content of an element etc.
selector::pseudo element { property: value; }
/* e.g. */
p::first-line { color: #ff00ff;
text-decoration: underline;}
The ::first-line pseudo-element can only be applied to block-level elements.
Other Pseudo Elements :
- Before Pseudo-element (::before) to Insert something before the content
- First-letter Pseudo-element(::first-letter) to select the first letter
- After Pseudo-element (::after) to Insert something after the content.
- Marker Pseudo-element (::marker) selects the markers of list items
- Selection Pseudo-element (::selection) Selects the portion of an element that is selected by a user
Attribute Selectors
One way to target an HTML element specifically when many similar elements are there is by using an attribute selector that targets specific attributes or attribute values of the said element.
a[target] { font-weight: 500px; }
The above example selects all <a> elements with a target attribute.
a[target="_blank"] { font-weight: 500px; }
The above example selects all <a> elements with a target attribute that has value set to "_blank".