CSS Selector Question


So looking at class selectors, I understand that to target a class I would use a figure 1. To target all paragraphs I would use figure 2. But I do not understand what Figure 3 is, it isn't like the others.

Figure 1:
.class {

Figure 2:
p.class {

Figure 3
.class p {

The Question: What does .class than the element p mean? (note: there is no comma there)


The class selector .class followed by the element selector <p> would allow you to reach an element that is a child of another element. So this would select any <p> within an element effect by .class

This is useful when you need to reach elements nested within other elements. Such as:

.class li p {

This would select any <p> element within a <li> element within any element effected by .class.

There is an important distinction between this and your Figure 2 as this specifies that only specific elements should be affected by a class.

In this example, only <p> elements with the class ".class" will be effected by your declarations.

It won't go down the "branches" of the HTML "tree", so to speak.

For example:

text-align: center;

States that, in order for <P> to be centered it will need to be explicitly assigned to class .class.

Let me know if this helps!


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.