Having trouble understanding the different selector setups

I am seeing different code in different coding examples that show multiple selectors declaring content and I can’t seem to figure what all the different variants mean:

Example 1:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

This basically means that the “ul” is always described by the content in the code above.

Example 2:

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

I think this means that for every list item <li> with a link <a ...> , the code above styles the <a ...> in the html code. Or does it mean the <li> in the html code is styled by the follow up code between the { }. And the comma, means that there are 2 classes using the code between the { }.

Example 3:

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

Then there is this example, which contains a comma to show that li a:hover and .dropdown:hover are both classes? but there is no comma seperating .dropdown:hover from .dropbtn so what is going on here?

Example 4:

li.dropdown {
  display: inline-block;
}

Then there is this example. What does the period between li and dropdown mean? Is this the same as a space between them or does this mean something different?

Also, what does the comma between selectors mean and what does it mean when there isn’t a comma between selectors?

li a, .dropbtn

Select all a elements inside li elements (a space is a descendant combinator)

and (the comma is a selector list)

Select the elements with the .dropbtn class


li a:hover, .dropdown:hover .dropbtn

Select a elements inside li elements, when the a elements are hovered.

and

Select the elements with the .dropbtn class inside the element with the .dropdown class, when the element with the .dropdown class is hovered.


li.dropdown

Select li elements that have the class .dropdown. So the class has to be on an li element.


I would suggest you play around with the CSS to test it.

There are two more examples that is bugging me:
Example 1:

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

So for this example you are saying this mean to select all a elements inside of all elements that have the class .dropdown-content?

Example 2:

.dropdown-content a:hover {background-color: #f1f1f1;}

And this one means select all a:hover or links that are hovered over, within any element using .dropdown-content class?

Thanks for the help.

Yes to both.

It is often easier to just test it when in doubt.