CODEWITHSUNDEEP
htmlcsscss-selectors
Manolo
Manolo

Reputation: 26350

:first-child selector doesn't work

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>

Upvotes: 0

Views: 132

Answers (4)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

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%;
}

Upvotes: 1

Ashu
Ashu

Reputation: 36

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

Upvotes: 0

Stein G. Strindhaug
Stein G. Strindhaug

Reputation: 5119

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.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128781

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>

Upvotes: 2

Related Questions