Tips Regarding Contextual Selectors

Category	: CSS		Views	: 4200
Version	: 2.1		Rating	:	2.8/5 (33 votes) Currently 2.82/5 1 2 3 4 5
Type	: Text

I believe that the first question that may pop in your head when you read the title is “what exactly is a selector?” You might know (or remember) this, but anyway – a selector is nothing more than another name for a HTML element. It is called a selector because it is used to specify a certain rule in CSS. Now, let’s see what is the contextual selectors technique that I have been talking about in the title. An example first:

First of all, notice that I have bolded both p and i. Notice another thing about those two? They are not separated by a comma. As a side note, this style is also known as grouping. Of course, I might have exaggerated a bit with the underlining, but it’s just an example value. But, getting back to the matter at hand – If you read something like this for the first time, you might think that all paragraphs and all elements that are italic will be underlined. No, it actually means that only those elements that are children or any other descendant of a paragraph will be underlined. A simple example – let’s say you have a headline with an italic element. That certain italic element will not be underlined because the headline is not a paragraph descendant. I will repeat what I have said before: the style will only apply to those italic elements that are paragraph descendants. Remember that these are not general selectors but contextual selectors.

Contextual selectors technique and grouping are not that similar

We’ve talked about the contextual selectors technique and how it works above. It is very important that you do not mistake this technique with grouping. Remember that with grouping you will define simultaneously a style for a greater number of selectors. In other words, if we were to talk about the same piece of code as above, if you would want to group p and i so that all paragraphs and all elements that are italic are underlined, you should be using a comma to create a group style. Here is the example you were looking for:

Bottom line is: the main visual difference (in code at least) between grouping and using the contextual selectors technique is that little comma put between the selectors.