To dive deeper into these selectors,
I would like to make our list a bit more complex first.
At the moment we have these full list items.
So just the list element here,
I would like to add a bit more information to our list
because basically,
what if we put that description of our challenge
into a paragraph?
So inside the list here,
so take this right here and right there.
And then ahead of this paragraph,
we add the day and the date,
because typically challenges are related
to a specific date so to say.
That is also what we can add here to our project.
To highlight the specific date,
we also need a specific element,
should be the content of the element here.
"h1" is reserved for the main heading of this website here.
So why don't we just go for an "h2" element here
and add, for example, Tuesday, April 2nd.
So on this specific day, we have this challenge
and we can, of course, also quickly format this
to make it look a bit more structured.
Let's apply the same logic to all our other list items.
So here we add the "h2" element here.
We could go for Wednesday, April 3rd,
and then we create another paragraph
which contains our challenge of this corresponding day.
Then we do the same thing for our third list item here
again, "h2" element, Thursday,
April 4th,
paragraph, which contains the challenge.
And finally, one last time we add an "h2" element.
This should be Friday, April 5th,
and here we want to,
well, maybe not learn about forms,
not too happy about this goal.
Let's maybe rather say we want to practice
advanced HTML and CSS concepts
to not be too specific here.
Let's format this.
And with that,
we added more information to our list
and we added paragraphs in this list here.
So we only have paragraphs in here at the moment,
but if we also go to our header here maybe,
and say, well, we have challenges here for the next day.
So to say, and I want to emphasize that.
So we could also add another paragraph up here,
which says exactly that,
these are my goals for the next days.
For example, like this, with this change in place
we might run into a slight problem though,
because on our website,
we now have the paragraph here in our header
and we have two paragraph here in all our list items.
So this one, that one and so on.
At the moment,
the paragraph only has the font family property
applied by us.
This was done here in the shared.css file
and that's fine.
But if we look at our website, we see that for example,
here for this paragraph,
we need some more margin to the bottom here.
Well, to get more space between the button
and our description here.
If it would go to our shared CSS file now,
here, and add, for example, a margin-bottom.
This one here,
margin bottom simply allows us to specifically
tailor one of the four directions for a margin
could be applied.
You remember we had the logic of adding a margin
like this, for example, for pixels top, right, bottom, left,
then we could add four pixels, eight pixels.
So four pixels, top bottom, eight pixels left, right,
or four pixels, four pixels, eight pixels, for example.
So top, right, bottom and left.
Here with margin bottom, we specifically target
one specific margin direction that's bottom here,
and we could set it.
We add a bottom margin of maybe 36 pixels here.
If we do this,
you see that this works here for our paragraph,
but the margin was also added here
for the paragraphs we have in our list items.
Definitely not what we want.
Therefore, we should get rid of this rule right here.
And now we should specifically target the paragraph
where this margin should be added.
In our case, this is this paragraph here in the header.
And as this specific paragraph only exists
once in our website, we can use a selector.
We already used in the course,
and that's the so-called "ID selector".
The ID selector was used here in the index HTML file,
that's it, so we can create it again.
So we add the ID attribute
and maybe call this ID description
as it describes, well, what is displayed on this website.
With the ID being created in our full week CSS file,
maybe here below the "h1" element we can refer now to this
ID with the hashtag and then the ID name.
And here we then add our margin bottom
as we just did it for all paragraphs again,
with this 36 pixels.
Going back to the website, you'll see,
we now have this nice distance
between our free elements here
without changing the margin here for our list items.
We can also target our element differently though,
because if you look at our structure,
we have the header here, this one, and inside the header,
we have this paragraph.
This means the paragraph is a so-called
descendant of the header.
And we also had such a so-called combinator.
So now we use the ID selector,
but with the descendant combinator,
we can also target exactly this specific paragraph
as it's the only paragraph here inside our header element.
How does this work?
Well, if we comment out our ID selector
and now refer to our header, add a space,
and now the paragraph like this,
so this means we want to target all paragraphs,
which are descendants of the header element.
And if we also add margin bottom right here now
of 36 pixels.
Then you get exactly the same result as before
without adding the ID.
Now, which one should you use?
Well, it depends to be honest.
In this course, we'll add a mix of combinators
and selectors also to practice these concepts.
In real world projects, we typically rather use combinators
than too many IDs and so-called classes,
which we'll cover in a few minutes.
It's just important for you to understand
that you have different ways to specifically select
the elements you need.
Talking about specific elements,
let's also go to our list items here once again.
Because for the list items,
if we scroll down a bit and maybe also format this quickly,
so like this for these list items,
I also want to apply the concepts we just learned about.
I want to make sure that both the paragraph
and the "h2" elements.
So basically the content of our specific list items.
So this one and that one.
The "h2" element should have a slightly different color
and a different font family.
Because at the moment we have this several font family,
which I don't think looks good.
And for the paragraph,
I want to reduce the margin a bit because of the distance
is a bit too big between these two types of information.
And at the moment we have the default margin being applied
here for paragraph elements by the browser.
So we have to select the "h2" element and the paragraph.
For the "h2" element it's quite straightforward.
We only have the "h2" elements here in our list items.
Therefore, the normal type selector is sufficient.
For the paragraph things are a bit different though.
Let's get started with the "h2" element though,
and that's quite straightforward.
We can just select "h2" in here.
And now I prepared another color here
with an "RGB" code of 78,
13,
and 5.
Now you see, we have this slightly reddish tone in here,
which looks better already.
And we'll also apply a different font family.
Here we will use Oswald
and sans-Serif as a fallback.
With that our page looks a lot better already.
Now what about the paragraphs though in here?
We have plenty of options to tackle these.
First option could, of course, be well,
we use again a combinator and say something like,
well, all paragraphs inside our main element.
So main "p" as we had it before,
if I would now add a margin of 12 pixels, for example.
This supplied us,
doesn't make a big difference to be honest.
But if we go to our element in here
and select the paragraph, then you see,
we now have just 12 pixel margin.
So this worked.
Besides that, I would also like to use
a different color again.
This should be the color with the code
71,
29,
and 22.
Now we have that slightly different color.
It's hard to see, it's just about the slide changes
we applied here, but if you scroll up,
you see this color is applied.
As you see, it's a bit better to read now.
So this is one way to use this descendant combinator.