Becoming proficient in CSS: Understanding Selectors
A CSS Selector is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
They are incredibly powerful and understanding them is necessary to style a webpage.
Selectors can be divided into three broad categories:
1. Element Selectors:
These simply mention the HTML attribute/element that you want to apply a particular style to.
Example: p{ color: blue; }
2.Class Selectors:
We can create a custom class name that applies the same styling to all html elements where we add the class to.
CSS syntax: .classname{property1 : value ; property2: value;}
Syntax in HTML doc: <HTMLtag class=” classname”>.
We can also mention multiple classes in a single tag by simply separating their names by a single space: <HTMLtag class=” classname1 classname2 “>
3.Id Selectors:
These work in the same way as class selectors except they are unique and can be specified only once in an HTML document.
CSS syntax: #idname{property1 : value ; property2: value;}
Syntax in HTML doc: <HTMLtag id=” idname”>
An illustration is given below showing how CSS selectors work:
Combining Selectors
Combining Selectors is a very powerful technique that allows you to more precisely target elements.
1. element.class
The element.class selector is used to select the specified element with the specified class. Note that that there’s no spaces between the first selector and the second selector.
2. Child selector(>)
selector>selector is used to select elements with a specific parent. The order with which this is implemented is right to left. Thus, the selector (element/ class /id) mentioned on the right should be a direct descendant of the selector on its left.
3. Descendant selector (space)
selector selector (separated by space) is used to select an element or class that is a descendant of the element specified on its left, no matter how deep( i.e. doesn't have to be a direct child )
4. Adjacent Sibling Selector (+)
selector+selector is used to select an element that is directly after another specific element ( both have the same parent element )
5. General Sibling Selector (~)
selector~ selector is used to select all elements written on the right side that are preceded by the element on the left.
To get a practical understanding of how combination selectors work, visit this link: https://www.w3schools.com/cssref/trysel.asp
Grouping selectors:
In CSS it is possible to group selectors together which should be assigned the same property values, to minimize the amount of code required. This can be achieved by separating various selectors by commas.
Example: h1,h2,div{ color: blue; }
Pseudo Selectors:
These target the ability to style based on user interaction with the page.
For example, we would want the styling of an element to change if the user hovers or moves their mouse over that element.
The way you specify pseudo-class selector, is by specifying some selector that we already know about with a colon and a predefined pseudo-class name (selector: pseudo-class{ property : value ;} )
The major types of pseudo-class selectors are link, hover, active and visited ,which can alter the styling of a link when it’s simply displayed on the screen, or when the user hovers his mouse over the element, when the user selects the link, and when a link has been visited, respectively.
Another powerful pseudo class is nth-child(), which can alter the styling of the nth element in its parent class.
For example, p:nth-child(even){ background: blue} will color the background of all the even paragraphs blue.
This is demonstrated below:
More on web development in our next articles so stay tuned to Geek’s Nest!
