override css of grandparent from child element - javascript

I have the following code structure:-
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>
..
.. so on
Now li has the following css :-
margin-top:35px
I don't want to inherit the above margin for li which contains the class green but I want it for the class xyz.
I have tried using operator > in css but it doesn't work.


If you dont want margin-top:35px to be applied (inherit from parent li) to div.green then here is the solution
CSS
.green {
margin-top:-35px;
}
HTML
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>


You can use :has() jQuery pseudo selector:
$('.container:has(.xyz)').css(...);


With this code structure, assuming a parent container:
<ul>
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>
</ul>
You could do this:
ul li:nth-child(2) {
margin: 0;
}
https://developer.mozilla.org/en/docs/Web/CSS/:nth-child
But a rule to "If I have inside a div with xyz class then..." I think it is impossible in pure css.
I hope it helps.


There is no parent selector in css but you can use javascript:
$('.xyz').closest('.container').css('margin-top', '35px');

Related

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.

if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");

Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

css slector jquery: how to select first occurance of class after a particular class

I have the following html
<ul class="main"> ... </ul>
<div class="submain">...</div> --> select this
<div class="submain">...</div>
<div class="submain">...</div>
...
<ul class="main"> ... </ul>
<div class="submain">...</div> --> select this
<div class="submain">...</div>
<div class="submain">...</div>
How to select all the first submain elements after main.

You can do it like this
For this case you need to select the sibling of the class so that can be achieved with + selector.
The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
You can read up more here
Adjacent sibling combinator
.main + .submain{
color:green;
background:'blue';
}
<ul class="main"> ... </ul>
<div class="submain">Selected</div> --> select this
<div class="submain">...</div>
<div class="submain">...</div>
...
<ul class="main"> ... </ul>
<div class="submain">Selected</div> --> select this
<div class="submain">...</div>
<div class="submain">...</div>

As Code Maniac said - use "+" combinator to select adjacent siblings. From me, I'll give you link to the docs of how CSS combinators works:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators

Locate the value of an attribute, match and find the value on other elements and alter the css

So essentially I am trying to find the value of an attribute, in this instance, 'data-location', and then search for that value elsewhere, in this instance in the form of an ID, and alter the CSS for that matched value.
I have the below so far which I thought would work, but I am not sure how to check for various different values for various elements and apply accordingly, so I have grouped the different sections in div's with classes so I can break them up from one another
Thanks guys
var getvalue = $('ul#test').find('li').attr('data-location');
if( $('div.other div').attr('id').val() == getvalue ) {
$( this ).css('background-color','red');
};
#thebirchplot3 {
padding:30px;
background:#fff;
}
#theashplot3 {
padding:30px;
background:blue;
color:#fff;
}
#thediveplot1 {
padding:30px;
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="theashplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="thediveplot1">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
</div>
</div>

You need to do it like below:-
Working Example:-
$('ul#test').find('li').each(function(){ // iterate over each li element
var ultest = $(this); //assign current li object to variable
$('div.other').children().each(function(){ // now iterate to each child div of other div
if($(this).attr('id') == ultest.data('location')){ // compare id with data-location
$( this ).css('background-color','red'); // if same then add background color
}
});
});
#thebirchplot3 {padding:30px;background:#fff;}
#theashplot3 {padding:30px;background:blue;color:#fff;}
#thediveplot1 {padding:30px;background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
this is dummy
</div>
<div id="thebirchplot355435">
text
</div>
<div id="theashplot3">
which shows you
</div>
<div id="theashplot35465464">
that everything
</div>
<div id="thediveplot1">
working fine now
</div>
</div>
</div>

use jquery find() method for your requirement as
var getvalue = $('ul#test').find('li').attr('data-location');
$('div.other').find('#'+getvalue).css('background-color','red');
working fiddle is js fiddle

How to show and hide a section?

I want to show the div of selected HTML link.
For example:
I clicked on the html link Categories the <div id="categories" ... > will be showed and the other div's will hide.
HTML
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>

Try this:-
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').hide();
$('#' + $.trim($(this).text()).toLowerCase()).show();
});
Fiddle
OR
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show()
.not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
Fiddle

$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
use the above code to make it work.
Working Fiddle : https://jsfiddle.net/z4bprass/1/

You can use css :target, general siblings selector ~
:target {
display: block !important;
}
:target ~ div[id] {
display: none;
}
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
<div id="quizzes">//default showed Quizzes!
</div>
</div>

jQuery accordion

Our html:
<ul class="accordion">
<li>
<h2 class="a-head">head 1</h2>
<div class="a-body">body 1</div>
</li>
<li>
<h2 class="a-head">head 2</h2>
<div class="a-body">body 2</div>
</li>
<li>
<h2 class="a-head">head 3</h2>
<div class="a-body">body 3</div>
</li>
</ul>
JS:
$(".accordion .a-head").click(function()
{
$(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
$(this).siblings().css({backgroundColor:"#fff"});
});
This accordion begins to work If I remove <li></li>. How do I make it work with current code?
Actually problem is in .siblings().
Thanks.

I can offer you this:
jQuery:
$('li h2.a-head').click(
function(){
$(this).closest('ul').find('div.a-body').slideUp(400);
$(this).closest('li').find('div.a-body').slideToggle(400);
});
css:
li div.a-body {
display: none;
}
JS Fiddle demo.

Is it what you want? : http://jsfiddle.net/v2Z5L/1/
It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.

Categories

Resources