CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale
Aşağıdaki kodlar arasındaki farklılıklar nedir?

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.

Kaynak matthom.com/archive/2006/01/31/css-quiz-refresher

Yorumunuzu Ekleyin

Css Referansı
CSS ve Katmanlar
CSS ve Filitreler
Yükleniyor...