footer.p vs “footer p” selector?

programming web dev
1

footer.p vs “footer p” selector?

I’ve html code like this:

<footer><p>Copyright &copy;2027 by The Code Magazine</p></footer>

I want to select it.

CSS:
footer p{
  font-size:16px;
}

But footer.p isn’t working. “footer p” works though. Why is footer.p not working? I’ve seen div.p selector being used in lots of places.

Descendant selector:
It selects all descendants of an ancestor. In this case, all p inside footer.

2

When you have a selector like footer.p, what you are matching is an element that looks as follows:

<footer class="p">Blah!</footer>

The dot in the selector refers to a class value :slight_smile:

1 Like
3

Thank you. I’d seen div.p somewhere and thought div.p meant selecting paragraph inside a div.

1 Like