CODEWITHSUNDEEP
csscss-selectors
Jan Klaas
Jan Klaas

Reputation: 371

How to select first sibling classes of a parent class with css?

I've tried every possible way with numerous selectors but I cannot seem to find a way to select the class on my website. I've worked out the problem in a JS fiddle here and it works: https://jsfiddle.net/ppyjo1bk/

On my website http://wellfixreparaties.nl and I only want to show the first two reviews which are generated by a plugin. This is the structure of the css plugin:

<div class='wp-google-reviews'>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
</div>

I target the second element class like this:

.wp-google-reviews .wp-google-review: nth-of-type(2) {
     background-color: red;
}

However, this does not seem to work on my website but it does on the fiddle. I've used !important also and when not using the nth-selected I'm able to change the background of the div's.

Anyone has a idea what's holding me back from using the nth-of-type selector here?

Upvotes: 1

Views: 2537

Answers (4)

Rahul Das
Rahul Das

Reputation: 172

try this:

.wp-google-reviews div:nth-child(2) { background-color: red; }

the above code selects the second div of class wp-google-reviews

Upvotes: 0

Gerard
Gerard

Reputation: 15796

You have a space between : and nth in your CSS. Remove that and it will work.

.wp-google-reviews .wp-google-review:nth-of-type(2) {
     background-color: red;
}
<div class='wp-google-reviews'>
   <div class='wp-google-review'>A</div>
   <div class='wp-google-review'>B</div>
   <div class='wp-google-review'>C</div>
   <div class='wp-google-review'>D</div>
</div>

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9032

there's another background-color property in your web with !Important so it's overwritting your property:

.wpac, .wpac h1, .wpac h2, .wpac h3, .wpac h4, .wpac h5, .wpac h6, .wpac p, .wpac td, .wpac dl, .wpac tr, .wpac dt, .wpac ol, .wpac form, .wpac select, .wpac option, .wpac pre, **.wpac div**, .wpac table, .wpac th, .wpac tbody, .wpac tfoot, .wpac caption, .wpac thead, .wpac ul, .wpac li, .wpac address, .wpac blockquote, .wpac dd, .wpac fieldset, .wpac li, .wpac strong, .wpac legend, .wpac em, .wpac s, .wpac cite, .wpac span, .wpac input, .wpac sup, .wpac label, .wpac dfn, .wpac object, .wpac big, .wpac q, .wpac font, .wpac samp, .wpac acronym, .wpac small, .wpac img, .wpac strike, .wpac code, .wpac sub, .wpac ins, .wpac textarea, .wpac var, .wpac a, .wpac abbr, .wpac applet, .wpac del, .wpac kbd, .wpac tt, .wpac b, .wpac i, .wpac hr {
    background-color: transparent!important;
}

add !importantto your property and it should work fine as your css sheet is loaded after that one:

.wp-google-reviews .wp-google-review: nth-of-type(2) {
         background-color: red !Important;
    }

Upvotes: 2

83N
83N

Reputation: 286

Try getting rid of the space between the : and nth-of-type

Upvotes: 0

Related Questions