p a
p .a
p.a
p > a
p + a
p a
p a
{
font-weight: bold;
}
This will match any <a> element, inside any <p> element. Both of the following examples apply font-weight: bold; to the <a> elements:
<p><a href="..."></a></p>
<p>
<ul>
<li><a href="..."></a></li>
</ul>
</p>
So, no matter how deeply nested each <a> element is - as long as they’re somewhere inside a <p> element, they will be targeted.
The following example is incorrect:
<ul>
<li><a href="..."></a></li>
</ul>
There are no <p> tags surrounding this list, so the style will not be applied.
p .a
p .a
{
font-weight: bold;
}
This will target any element with the generic class of "a," contained within <p> elements. So, for this example, we’re no longer referring specifically to <a> elements. We could be referring to any element, but the <a> elements could also have a class of "a" applied.
All of the following examples correctly apply font-weight: bold; to the elements:
<p>
<p class="a"></p>
</p>
<p>
<ul>
<li class="a"></li>
</ul>
</p>
<p>
<a href="..." class="a"></a>
</p>
p.a
p.a
{
font-weight: bold;
}
This will target any <p> element with a class of "a."
There is a distinct difference between this selector, and the previous: p .a. Notice the space between the p and the dot. This subtle "space" means something entirely different, so be careful.
The only elements this selector will target is this one:
<p class="a"></p>
p > a
p > a
{
font-weight: bold;
}
This will target any <a> elements, which are children of any <p> element. A child is a direct descendant. Therefore, the following example will be targeted:
<p>
<a href="..."></a>
</p>
The <a> element is a child of the <p> element, so it’s targeted.
This example is incorrect:
<p>
<ul>
<li><a href="..."></a></li>
</ul>
</p>
This example has the <a> element as a child of the <li> element, not the <p> element. In fact, the <a> element is a great-grandchild of the <p> element.
p + a
p + a
{
font-weight: bold;
}
This will target any <a> element that’s an adjacent sibling to a <p> element. The following example illustrates this:
<p></p>
<a href="..."></a>
<ul>
<li></li>
</ul>
Here, the <a> element is a sibling of the <p> element, and most importantly - the <a> element is directly adjacent to the <p> element, meaning next to.
This example is incorrect:
<p></p>
<ul>
<li></li>
</ul>
<a href="..."></a>
Here, <a> is no longer an adjacent sibling, to the the <p> element.
