Having trouble understanding the different selector setups

[Excelsior]

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?

[lasjorg]

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.

CSS selectors - CSS: Cascading Style Sheets | MDN

[Excelsior]

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.

[lasjorg]

Yes to both.

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