:first-child selector doesn't work

Question

I want to give more width to the first <article class="type-reviews"> element, so I've tried:

/*this is what I had previously and works right*/
#show-reviews .type-reviews {
    display: inline-block; 
    width: 31%;  
    margin-right: 2% !important;
    padding: 0px; 
    vertical-align: text-top;
}

NEW RULE:

/*this is what I've added to change the first element width*/
#show-reviews .type-reviews:first-child {
    width: 50% !important;  
}

but the new CSS doesn't change anything. Even inspecting with Firebug seems that the rule is not applied to the first element.

The HTML is the next:

...
<div id="show-reviews">
    <div id="banner-lateral">...</div>
    <article id="post-300" class="post-300 type-reviews status-publish hentry has-post-thumbnail">...</article>
    <article id="post-222" class="post-222 type-reviews status-publish hentry has-post-thumbnail">...</article>
    ...
</div>

Yes because without the HTML there so much we can do... Need your HTML. — Ruddy, Jan 16 '14 at 08:47

score 2 · Accepted Answer · answered Jan 16 '14 at 08:49

This is because your .type-reviews isn't the first child, your div element is. It is the first article element, however, therefore you can use :first-of-type:

#show-reviews .type-reviews:first-of-type {
    width: 50%;  
}

Also you really don't need to use !important here, as your new selector has higher specificity than your old one.

For reference:

<div id="show-reviews">
    <div ...>...</div>            <!-- First child, first of type (div) -->
    <article ...>...</article>    <!-- Second child, first of type (article) -->
    ...
</div>

score 1 · Answer 2 · answered Jan 16 '14 at 08:51

Without seeing the html I cannot be sure but I gues there might be a different element that is the first child in the container, like this:

<div id="show-reviews">
    <span>some other element</span>
    <div class="type-reviews">This is not the first child</div>
    <div class="type-reviews">This is another..</div>
</div>

Either make sure no other element is before the element you want or consider using the :first-of-type selector instead.

score 1 · Answer 3 · edited May 23 '17 at 12:14

FROM http://www.w3schools.com/cssref/sel_first-of-type.asp

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

This is the same as :nth-of-type(1).

:first-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments

From CSS3 selector :first-of-type with class name?

No, the :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
  [1]: http://www.w3schools.com/cssref/sel_first-of-type.asp.

So you must use

#show-reviews .type-reviews ~ .type-reviews{
     width: 50%;
}

@ManoloSalsas this is not the repeated answer mate, that answer just worked please read my answer now..!! — Sajad Karuthedath, Jan 16 '14 at 09:02
@ManoloSalsas: tell me if this is the repeated answer or just the right answer ? — Sajad Karuthedath, Jan 16 '14 at 09:08
Now it is not a repeated answer. Thanks :) Anyway, @JamesDonelly answer works perfect for my case. — Manolo, Jan 16 '14 at 09:09

score 0 · Answer 4 · answered Jan 16 '14 at 08:52

0

i think it should work in chrome and Firefox both.it might be possible other part of CSS is overriding your rules

answered Jan 16 '14 at 08:52

Ashu

26
3

:first-child selector doesn't work

NEW RULE:

4 Answers4