search

martinjc / introduction-to-html-and-css

A set of notes introducing HTML and CSS
https://martinjc.github.io/introduction-to-html-and-css
MIT License
2 stars 4 forks source link

CSS Selectors and Specificity #16

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

CSS Selectors and Specificity

https://martinjc.github.io/introduction-to-html-and-css/notes/css-selectors-specificity/

harperhhh commented 2 years ago

I have a question about the css specificity example: what does the &: first-child {color: red} mean here?

martinjc commented 2 years ago

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.

HassaanJ commented 2 years ago

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?