CODEWITHSUNDEEP
csscss-selectors
Igor Laszlo
Igor Laszlo

Reputation: 742

first type and child

I start to be confused by the >, :nth-child() and :nth-of-type().

I have :

<div class="entry-content">
    <div class="first-img">
        <img />
    </div>
    <div class="first-box">
        <blockquote></blockquote>
    </div>
    <blockquote></blockquote>
</div>

I would like to style the first blockquote which is DIRECTLY in the .entry-content (it means that this is the second blockquote in the example) BUT NOT the first blockquote which is in the div .first-box.

I tried .entry-content > blockquote:nth-child(2), also .entry-content:nth-of-type(2), they do not work.

Does the .entry-content > blockquote mean that :

Upvotes: 1

Views: 87

Answers (3)

Harry
Harry

Reputation: 89750

The selector that you actually need to use is:

.entry-content > blockquote:nth-of-type(1) {
  /* styles */
}

All the :nth-*, *-child selectors work only on elements who share a common parent. In the HTML that is provided in the question, the blockquote that is directly under the .entry-content is the first of its type and so you should use nth-of-type(1) to select it instead of nth-of-type(2).

.entry-content > blockquote:nth-of-type(1) {
  background: red;
}
<div class="entry-content">
  <div class="first-img">
    <img />
  </div>
  <div class="first-box">
    <blockquote>Descendant</blockquote>
  </div>
  <blockquote>Child</blockquote>
</div>

Now for explanations on the other selectors (that either didn't work or weren't tried):

  • .entry-content > blockquote:nth-child(2) - This will select the blockquote that is present directly under an element with class='entry-content' if it also happens to be the second child. Here there are two div child elements before the blockquote and so the blockquote is nth-child(3).
  • .entry-content > blockquote:nth-of-type(2) - There is only one element of type blockquote that is directly under the element with class='entry-content' and hence this selects nothing.
  • .entry-content > blockquote - This would select all blockquote elements that are directly present under an element with class='entry-content' and so would not select the one that is present under the element with class='first-box. This is because > is child selector and selects only elements that are present directly under the reference element.
  • .entry-content blockquote - This is very similar to the above one but since > is missing it actually selects all blockquote elements which are a descendant of an element with class='entry-content and so it would select both the blockquote elements that are present in the HTML provided in question.
  • .entry-content:nth-of-type(2) - This one that's provided in the question is a different selector compared to all others. This selects the second element of every type (under a common parent) if it also has class='.entry-content.

Upvotes: 6

super11
super11

Reputation: 476

nth-child() starts from 0, meaning for example if you have a html code:

<div id="main">
     <div>text1</div>
     <div>text2</div>
</div>

The CSS selector #main > div:nth-child(0) will select the div where "text1" is. The CSS selector #main > div:nth-child(1) will select the div where "text" is:

Upvotes: 0

Covik
Covik

Reputation: 862

<div class="entry-content">
    <div class="first-img">
        <img />
    </div>
    <div class="first-box">
        <blockquote></blockquote>
    </div>
    <blockquote></blockquote>
    <p>
        <blockquote></blockquote>
    </p>
    <blockquote></blockquote>
</div>

.entry-content > blockquote will select only first level blockquotes. In my example those are <blockquote> before and after <p>.

.entry-content blockquote will select EVERY <blockquote>

Upvotes: 1

Related Questions