0

I am working on a website for a client, and she has Visual Composer installed. For a post grid, I need to assign a different color to each post title. My approach was to find the grid-item container and append :nth-child to it, then direct it to the custom css class I really want to apply the different color to.

Example code, based on the actual code:

.vc_grid-item:first-child > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: red;
}
.vc_grid-item:nth-child(2) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: green;
}
.vc_grid-item:nth-child(3) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: blue;
}

Strangely enough, this technique worked fine for the hover-text effect over the post's featured image.

I tried nth-of-type, but had little luck with it. It would work, but only parsed the first or second of type, applying the same color to all three divs.

I have tried every path permutation I can think of, but not a single one works. Trying to track down a path through the endless divs that Visual Composer generates is practically impossible. Using the code inspector (Google Chrome), I found dynamically generated classes, classes injected as inline styles, and classes that were in the rendered HTML, but nowhere to be seen in the inspector. After several hours of carefully mapping out different "class paths" to make this work, I gave up out of sheer frustration.

Interestingly enough, the Visual Composer documentation is clear that, by adding custom css classes through its UI, custom styling is easy and straightforward. My experience is that this is true--if you want to apply the same color to all your divs in the post grid. Try customizing each grid-item independently, though, and it's a whole different ball game...one that may be impossible to win.

Any ideas as to how I might get this to work without resorting to some kind of hacky JavaScript black magic?

Brian Francoeur
  • 85
  • 1
  • 2
  • 10
  • 2
    can you provide html and css structure? – Horken Dec 06 '16 at 03:10
  • I will add that tomorrow, but it's ugly--the HTML runs 10-12 divs deep from div.vc_grid-item down to div.vc_custom(ID number).featured-post-title. The associated CSS, as generated by Visual Composer, is equally nasty, – Brian Francoeur Dec 06 '16 at 03:52
  • Did you ever try using only this `.vc_grid-item:nth-child(3) .custom-post-title { background-color: blue; }` – Asons Dec 06 '16 at 03:56
  • Shot in the dark: are you dealing with elements that are dynamically generated? Or elements that are hidden and shown via some method? nth-child will still affect elements that are still a part of the DOM. – Brad Evans Dec 06 '16 at 04:50

2 Answers2

0

If you want to target a series of elements with the class .vc_grid-item, what you need is :nth-of-class... and it doesn't exist.

If you state the type of element, then you can use :nth-of-type:

div:nth-of-type(3).vc_grid-item > ... > .custom-post-title {background-color: blue;}

N.B. This sort of thing will be much easier when CSS4 :nth-match arrives.

Then, in this kind of situation, you will be able to use:

:nth-match(3 of '.vc_grid-item')

Further Reading: http://www.w3.org/TR/selectors4/#selected-child-index

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Hi, Rounin--I had tried div.grid-item:nth-of-type in the hope that it would work, but as you pointed out, :nth-of-type doesn't recognize CSS classes. – Brian Francoeur Dec 07 '16 at 12:36
0

child point to tbody in table

you must use tbody in selector for pointing child to tr

.vc_grid-item tbody :nth-child(1){
background-color: green;
}
.vc_grid-item tbody :nth-child(2){
background-color: blue;
}
Omid Farvid
  • 785
  • 7
  • 13
  • Hi, Omid--I did try this, and it didn't work for me. Everything I tried with :nth-child began with vc_grid-item. That's how I got the different colors to work on a different part of the same grid-items. This is what I found really frustrating, too--because I got it to work once. – Brian Francoeur Dec 07 '16 at 12:34