Whenever you want to be more specific about which style
should be applied to which elements,
you use select Selectors or Combinators.
We learned about some Selectors already,
Combinators is a new topic.
Let's explore both in theory now,
and let's get started with our Selectors.
We know two types of Selectors already.
The first one is the so-called Type Selector,
we used it throughout our project.
You can just refer to a specific element type, and then add
your CSS rules, therefore these rules will be applied
to this specific element type.
For example, a paragraph, an h2 element, anything like this.
We also had a look at the ID Selector.
The ID Selector was created by adding an attribute,
the ID attribute and the ID name in the HTML file,
to an HTML element, and we can then refer to this ID in CSS
with the hashtag and then the ID name that we created
for this specific element.
We also have two other core Selector types,
one is the so-called Group Selector.
The Group Selector allows us to well,
group multiple element types together,
where our specific CSS rules we define
as part of the Selector will then be applied.
Here we could for example, say we use the paragraph
and the h2 element, and then we apply certain styles,
to both of these element types.
We have another core Selector type though,
and this is the Class Selector.
The Class Selector is quite similar
to the ID Selector, in general.
We also add the class as attribute to our HTML element,
then we define a class name, and then in CSS,
we refer to this specific class name with the dot notation,
and then by adding this class name.
The difference to the ID Selector is that,
whilst the ID Selector is unique,
so an ID should only be used once for a specific element,
the Class Selector can be used for multiple elements.
So with that, you can create specific classes of elements,
so to say, which then have the specific styles applied,
which you defined in your Class Selector.
So these are Selectors,
besides that we also have Combinators and we'll have a look
at two core Combinators now,
and Combinators are a combination of different Selectors.
What does this mean?
Well we have, for example, the Descendant Combinator,
here referring to the List Selector,
and the Paragraph Selector, just an example here of course.
If you would use this Combinator in your CSS code,
and then apply certain rules to it,
then the rules defined here would be applied to all
paragraphs which have a List item as ancestor,
not as parent, but as ancestor.
That's again one of the reasons why we talked
about the parent, child, ancestor descendants,
so all these different combinations and these relationships
we have between our elements in HTML.
Here it becomes important because with this logic,
we can target specific elements,
and apply certain styles to these.
Besides the Descendant Combinator,
we also have a Child Combinator,
written basically in the same way,
with the difference here that we don't add the space,
but we add this larger than sign, between the two elements.
Here, I took the example of an h2 element,
and the paragraph element,
the result would be if you use this combination in CSS,
that only paragraphs which are direct children of h2,
would have the defined styles applied.
So these are two core Combinators basically,
one allowing us to style any descendants,
the other one allowing us to apply styles to children.
That's the theory of course,
let's apply these concepts now in practice again,
in our course project.