1

I'm trying to figure out how to effect a parent class that has a particular child. As far as I can tell this is not possible with CSS3, but it might be possible with jQuery.

Here is the parent class .home .x-navbar

Here is the child class.x-btn-navbar

CSS I want to add to the parent class:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.8) 50%,rgba(0, 0, 0, 0.8) 100%) !important;
background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.37) 50%,rgba(0, 0, 0, 0) 100%) !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.8) 50%,rgba(0, 0, 0, 0.8) 100%) !important;

What jQuery code would I need to achieve effecting a parent classes css when it has a specific child?

Felicia Santos
  • 401
  • 3
  • 16

2 Answers2

0
var defaultCssRule = "linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.8) 50%,rgba(0, 0, 0, 0.8) 100%) !important";
var myWebkitRule = "-webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.37) 50%,rgba(0, 0, 0, 0) 100%) !important";
$(".home .x-navbar .x-btn-navbar").parents(".x-navbar").css({
    "background": myCssRule,
    "background": myWebkitRule
});
Sampgun
  • 2,822
  • 1
  • 21
  • 38
0

I hope I understand your question correctly. I think this is the Jquery code you would need:

$(document).ready(function() {
  var element = $(".x-btn-navbar").parent();
  element.css({"background": "linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.8) 50%,rgba(0, 0, 0, 0.8) 100%) !important",
 "background":" -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0.37) 50%,rgba(0, 0, 0, 0) 100%) !important"});
 });
seanysean
  • 421
  • 3
  • 12