I would really appreciate any help you could provide on this matter. I am trying to style the parent of a specific child element.
It seems that this might not be possible in CSS due to technical restraints, but I was wondering if there was a solution available in JavaScript that could achieve this?
I am trying to alter the parent <a> element of a <ul class="children"> child element, only when that <a> element has class="active". e.g. there will be other <a> elements with <ul> child elements which are not active that I don't want to be styled.
If you know of any solution that would be able to achieve this that would be much appreciated! Whilst I am familiar with CSS I am not competent enough in JavaScript to write this myself.
<ul class="menu">
<li>
<a class="active">Active Page</a>
<ul class="children">
<a>Something here </a>
</ul>
</li>
<li>
<a>Some Other Page</a>
<ul class="children">
<a>Something here</a>
</ul>
</li>
</ul>
I suggest you style a.active. (Or haven't I understood the question?)
I.e.
a.active {
background-color: pink;
}
There is no css selector to select parent elements. You should also give the parent element a selector you can use to style it.
Also see Is there a CSS parent selector? for more information on the parent selector subject.
May be you want this:
if($('ul.children a').hasClass('active')){
$('ul.children').sibling('a').addClass('active');
}
see:
I am trying to alter the parent <a> element of a <ul class="children">
while this is not true, <a> is the sibling in your case.
Why can't you do a style for the class active?
.active {
background-color: red;
}
As per your HTML you could style the exact parent element.
Your HTML nested tags are Ok.
No need of javascript
Your css rule should look something like this
a.active+ul.children { ...what ever .... }
(In order to style the UL class children when its sibling is a class active
I'm really confused by your question but your could give two class names to the same element. Like for the
<ul class="children">
You could name it to:
<ul class="children active">
Sorry, I read it again and again, and now I got it!
.menu>li>a.active{
font-weight:bold
}
It will select only the first-level "a.active" children from the first-level "li" children from ".menu" ;)
Hope it helps!
Related
I have created some components through a loop
<li v-for="card in cardID" :key="card">
<app-profile class="profile" :id="cardID[i++]"></app-profile>
</li>
I want to have a div around all of them so that i can centre the div, but I can't seem to get it working. Any help would be appreciated!
To add a class to the generated list elements, you can use :class="someClassName" like this:
<li v-for="card in cardID" :key="card" :class="someClassName">
<app-profile class="profile" :id="cardID[i++]"></app-profile>
</li>
And you don't need to wrap a div around the list elements to center them. Just add the center styles to the parent <ul> element instead.
I have this following hierarchy, and this is used at several places (so to add a class to them via jQuery is not feasable).
<li class="paginable">
<span id="step-1" class="done"></span>
</li>
<li class="paginable">
<span id="step-2" class="done"></span>
</li>
<li class="paginable">
<span id="step-3" class="done"></span>
</li>
<li class="paginable">
<span id="step-4" class="not-done"></span>
</li>
<li class="paginable">
<span id="step-5" class="not-done"></span>
</li>
On the basis of the class done on element span, I have to provide certain style to those span[id^="step-"] which are also having the class done.
But not including the last span with class done.
How can I exclude the last span with class done. The classes done and not-dont changes in order like a series of steps.
I've tried:
span[id^="step-"].done:not(-- with lots of combinations of last child on parent as well as child --)
But it won't work and I logically know why.
Any suggestions CSS ONLY? or should I go and add class everywhere it is switched using jQuery?
I don't think a css only solution is available.
Using jQuery
$('span.done[id^="step-"]').not(':last').css('color', 'red')
Demo: Fiddle
I'm trying to change the CSS of the cursor to default on a a href link of # on the menu-item-4082 "About" link below. And I don't know why this seemingly simple function doesn't want to work.
Must be something simple I'm not seeing. Is my CSS selector correct?
Or is there a different or better way to change the CSS with jQuery? What about removing the href="#" as well?
Fiddle: http://jsfiddle.net/2nbad1gc/
Function:
$("li#menu-item-4082 .not-click").css("cursor","default");
HTML
<ul id="menu-main-menu-bar">
<li id="menu-item-217" class="menu-item">
Home
</li>
<li id="menu-item-4082" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-has-children menu-item-4082
has-dropdown not-click">
About
</li>
<ul class="dropdown">
<li id="menu-item-158" class="menu-item menu-item-158">
Values
</li>
<li id="menu-item-4083" class="menu-item menu-item-4083">
Why
</li>
</ul>
Is my CSS selector correct?
No, it's incorrect. It should be:
$("li#menu-item-4082.not-click a").css("cursor","default");
You were trying to select the child of li#menu-item-4082 whose class is not-click. When in fact, the li itself had the class .not-click.
Remove the space between $("li#menu-item-4082 .not-click").
As a side note, I'd suggest adding a class rather than adding inline CSS.
$("li#menu-item-4082.not-click a").addClass('default-cursor');
.default-cursor {
cursor: default;
}
.. you could also remove the href attribute completely:
$("li#menu-item-4082.not-click a").removeAttr('href');
If you wanted to avoid jQuery completely, you could also remove the href attribute using plain JS:
Single element:
document.querySelector('#menu-main-menu-bar .not-click a').removeAttribute('href');
Multiple elements:
var anchors = document.querySelectorAll('#menu-main-menu-bar .not-click a');
Array.prototype.forEach.call(anchors, function (el, i) {
el.removeAttribute('href');
});
or you could avoid JS and just use CSS:
li#menu-item-4082.not-click a {
cursor: default;
}
Just use simple css
.not-click a{
cursor: default;
}
http://jsfiddle.net/2nbad1gc/14/
Your selector needs to be modified to
$('li#menu-item-4082.not-click a').css("cursor", "default");
Usually it is recommended to add a class to the HTML element that sets cursor to default rather than directly change the CSS with jQuery like this.
I have a dropdown <ul> inside a <span>. The reason is because I want the dropdown list to be as wide as the <span> text using width: 100%, and not hard px values, since the text varies in length on different pages.
Using an <ul> inside a <span> works but is not valid. What is valid is <u>, <small>, <b>, <strong> etc. but they have effects/style on the text which I don't want.
What I need is a dummy element like span, with no effects on the text that I can add my own classes to (for highlight). But it has to be a valid container for an <ul>.
Or some other good idea.
Currently:
<span class="hightlight"> My highlighted text
<ul class="dropdown">
<li> .. </li>
<li> .. </li>
<li> .. </li>
</ul>
</span>
The block-level counterpart of span is div. Neither of them has any impact on default rendering except that span is an inline element, div is a block element.
It is not clear why you need a container, since there is presumably some styling that causes some problem that you try to fix with a container. By default, ul is full-width, i.e. its width is the available width, i.e. width: 100%. And you can assign a class and properties directly on the ul element.
Regarding the other approaches considered in the question, u, small etc. cannot contain ul any more than span can, as per the specs. They have the same content model.
A <div> would be the equal. The <span> element is basically in inline <div> element.
You can use a DIV and display it as inline to not disrupt your current flow.
HTML:
<div class="hightlight"> My highlighted text
<ul class="dropdown">
<li> .. </li>
<li> .. </li>
<li> .. </li>
</ul>
</div>
CSS:
.highlight {
display: inline;
}
you can use strong if you want, and in css specify that .highlight { font-weight: normal } so it won't be bold anymore.
I tried this to remove the adjacent li, but it doesn't work:
$(this).prev(".Removable").remove();
Edit: I only want to remove the immediate adjacent li if it has that class.
WHEN SELECTABLE IS CLICKED I WANT THE PREVIOUS REMOVABLE TO VANISH
<ul>
<li class="Removable"> <li>
<li class="Selectable"> <li>
<li class="Removable"> <li>
<ul>
It worked for me: http://jsbin.com/esija/edit
$(document).ready(function() {
$(".Selectable").click(function(){
$(this).prev(".Removable").remove();
return false;
})
});
But it only removes the previous sibling as advertised.
Without seeing your html structure it's hard to tell the best selector to use, but you can try a catch-all traversal with closest, to hit the current <li> no matter where you start traversing from:
$(this).closest('li').prev('li.Removable').remove()
See Traversing/closest.