Open utterances-bot opened 2 years ago
I have a question about the css specificity example: what does the &: first-child {color: red} mean here?
Hi, this is a good question.
We've looked at document structure previously, and how elements that contain other elements can be considered to be in a parent <-> child relationship. :first-child
is a pseudo-element selector that allows us to 'choose' the element that is it's parent's first child.
So, if we have the scenario:
<div>
<p>some text</p>
<p>some other text</p>
</div>
using a first-child
selector on the div
would allow us to target the first paragraph element (containing 'some text') as it is the first child of that div
element. However, the other p
element would be unaffected, as it is the second child, not the first.
Hi Martin, A follow up to the question above, Is there a reason the first child in the specificity example is not red. From what I understand it is a pseudo-class selector so it's Specificity is higher and it also comes later in the document.
Secondly, What's the difference in content written in html file and css file. You added some additional text "this is odd" in the css document of Pseudo Classes and Pseudo Elements example?
CSS Selectors and Specificity
https://martinjc.github.io/introduction-to-html-and-css/notes/css-selectors-specificity/