To add styling to an HTML element on a web page, you must first select it. It's important to specify an element because a typical webpage contains so many HTML elements, and it only is logical to select the ones you would like to style and not everything else.
The good thing is that CSS allows you to select different HTML elements using CSS selectors.
W3C has provided a plethora of selectors to enable web designers to select virtually every element and style it.
This chapter looks at some of the most commonly used CSS selectors.
8 Responses
Hey Maxime.
One little detail:
On the: "Attribute and Value Selector" subtitle you have this HTML line:
Link to click.
But on the following examples, the value of the href is "home-page.html" from that point onwards.
Keep up the good work! Cheers
Thank you! I clarified these examples.
Also, I have a couple of questions.
Under "Select Direct Children" I am a bit confused about the use of classes and the (>) symbol. Particularly, examples 3-5.
Why on example 3 only the Second and Third level paragraphs are styled? The class is ".selectors-cd5", and you also added the "div" tag. But, the firs two "First level paragraph" are inside the "div class="wrapper selectors-cd5"
Why are those two not styled when they are "p" tags inside a "div" tag?
The same confusion comes with examples 4 and 5.
Additionally, I noticed that in your examples, when you have a CSS class like "wrapper selectors-cd5", but you only need to target the "selectors-cd5" part. Is there a need for the "wrapper" element before it? Or is it to keep the class identified as its own thing?
I can't do .wrapper selectors-cd5, and I think that had to do with the CSS syntax.
Sorry for the long post, but I am trying to wrap my head around it!
Thank you
Hey Miguel!
Thank you for your great questions!
Why on example 3 only the Second and Third level paragraphs are styled? The class is ".selectors-cd5", and you also added the "div" tag. But, the first two "First level paragraph" are inside the "div class="wrapper selectors-cd5"
This is because the full selector is ".selectors-cd5 div > p". Reading from right to left, we understand that this CSS selector is selecting all p elements that are direct children of a div element, which are themselves descendants of an element with the class 'selectors-cd5'.
To break it down further:
p: This is the element type being selected. It represents all p elements in the HTML document.
>: This is the child combinator, which selects only direct children of the element on the left. In this case, it is selecting only p elements that are direct children of a div element.
div: This is the element type being selected as a parent. It represents all div elements in the HTML document.
.selectors-cd5: This is the class of the element being selected as an ancestor. It represents all elements with the class selectors-cd5 in the HTML document.
So, this CSS selector is selecting all p elements that are direct children of a div element, and that have an ancestor element with the class .selectors-cd5.
The key part to understand is that the space in between ".selectors-cd5" and "div" denotes an ancestor-descendant relationship. We are selecting div elements that are descendants of elements with the selectors-cd5 class name.
The same logic goes for example 4 and 5. In example 5, the selector is ".selectors-cd5 div div > p"
Reading this CSS selector from right to left, we understand that it selects all p elements that are a direct child of a div element, which itself is a descendant of a div element, that in turns is a descendant of an element with the class name "selectors-cd5".
You asked:Is there a need for the "wrapper" element before it? Or is it to keep the class identified as its own thing?
There is no need for the 'wrapper' class to be present in the examples. We needed to use uglier "selectors-cd5" kind of classes to avoid conflict across the code demos, as the CSS is applied to the whole page.
To use both classes in a selector, to specify an element that has both the classes "wrapper" and "selectors-cd5", you would write it like this: .selectors-cd5.wrapper
Hope this helps!
Cheers!
Thanks for the thorough explanation. It cleared a lot of my questions and helped me understand better this chapter of the course. Much appreciate it!
Welcome Miguel and thank you for the great question!
This chapter is one of the most important of the course to understand well... it really is a fundamental part of CSS.
Hello Maxime,
In the "Class" example, code playground. I expected the second paragraph to be pink, however, this is not the case. Is this an error?
In the "attribute Value Begins With" it says to use the "^" but in the example, a "$" is used. Can both be used?
Greetings!
Indeed it was an error, thanks for letting me know!
Regarding the example, the ^ is "startsWith" and the $ is "endsWidth". There is no playground for starts with, just for ends with.
Cheers!