I have following HTML structure. I want to select first ul with class name 'second class' and apply width which will be different from second ul with same class name.
<div>
<div class='Link1'>
<a>Products</a>
<div class = 'firstClass'>
<ul class='secondClass'>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class='Link1'>
<a>Tools</a>
<div class = 'firstClass'>
<ul class='secondClass'>
<li></li>
<li></li>
</ul>
</div>
</div>
<div>
I had tried below css but didnt work.
.Link1 > .firstClass > ul.secondClass:first-child{
width:750px;
}
Using only CSS, there is no way to stop a rule from applying after it applied on one element. This basically means
.Link1 > .firstClass > ul.secondClass:first-child
will apply to all elements that match that selector.
However, you can easily apply a different class to only the first match using JavaScript:
var firstMatch = document.querySelector('.Link1 > .firstClass > ul.secondClass:first-child');
firstMatch.className = firstMatch.className + ' additionalClass';
... and, of course, you'd need to style the additionalClass in your CSS:
.Link1 > .firstClass > ul.secondClass.additionalClass:first-child {
/* CSS here */
}
Using jQuery, it would be:
$('.Link1 > .firstClass > ul.secondClass:first-child').first().addClass('additionalClass');
Here's a working example, as opposed to the original, not working.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last year.
how to specify CSS for an element without any grandchild elements? e.g.,
<div class="foo">
<ul></ul>
</div>
<div class="foo">
<ul><li></li></ul>
</div>
// hide the <div> whose child <ul> is empty, how?
div.foo {
display: none;
}
Hey there is :empty selector in css which allows you to do like this.
Javascript method to get what you asked for
But If you want to hide other things you should use javascript
:has is experimental
A simple way of doing this
let text = document.querySelector("div.foo > ul");
if(text.innerHTML == ""){
// set your things
document.querySelector("div.foo").style.display = "none";
// you can delete this thing too but this is just an examplee
}
using :empty selector
If you don't wanna use javascript then this method is also good
Simply use
div > ul:empty{
display:none; // or any styles that you can see
}
For just illustration purpose :
div.foo > ul{
background-color:blue;
height:30px;
}
div.foo > ul:empty{
display:none;
}
<!-- Below is empty ul -->
<div class="foo">
<ul></ul>
</div>
<!-- Below is non empty ul -->
<div class="foo">
<ul>
<li>This is with text</li>
</ul>
</div>
But be carefull
Empty elements are elements that have nothing in them. It cannot even have a whitespace.
There is something called :blank but it is experimental as far as I know.
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
I am working on this demo. How can I apply different style to my nested list (>Nested 1. and >Nested 2) rather than its parent list?
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul>
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
You can use li li a to select those elements. For example:
li li a {
color:red;
}
jsFiddle example
I would achieve this through classes added to the <ul> elements, then use the appropriate css selector to apply the style.
Add the class to the <ul> tag you want to style.
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul class="styledList">
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
Then, in the css sheet, apply styling to that class name, or just to the <li> elements within that list, whatever is appropriate.
Apply to <ul> and all decendants
.styledList {
// css style
}
Apply only to <li> inside the <ul>
.styledList li {
// css style
}
The . in the selector is used to specify that the style is applied to the elements with that class, or you can use the # selector to specify an ID that you want the style applied to, such as
<div id="styledDiv">Hello</div>
css
#styledDiv {
border: 1px solid black;
}
If you want to learn more about CSS selectors, you can check out the W3 article
http://www.w3.org/TR/CSS2/selector.html
and here is the class selectors in particular
http://www.w3.org/TR/CSS2/selector.html#class-html
I have been trying to figure this one out, but can't seem to get it right, perhaps I'm way off with my thoughts, but this is it.
I have no control over the UL class names, they are what they are. I can only change the class name of the , the code is as below:-
<div class="custom-parent-div-name-changeable">
<div class="custom-child-div-name-changeable">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
</div>
The problem I have is the "name-cant-be-changed" class for the UL has a background and border set. I need to remove the background and border in another stylesheet, using the !important selector due to limitations in the software used to power the website.
The major setback is this same class ("name-cant-be-changed") is used twice on the page. so I need to create CSS for the "name-cant-be-changed" which is inside "cant-change-this" div class. Both instances of "name-cant-be-changed" are within a div with class "cant-change-this", but have different parent class names, eg. "any-old-name", like so:-
<div class="parent-div">
<div class="any-old-name">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
</div>
</div>
How can I create separate CSS for the UL class "name-cant-be-changed" which is rendered based on the parent in which both reside?
I tried using the following, with various combinations of the class names to no avail:-
.custom-child-div-name-changeable > .name-cant-be-changed {
background: none !important;
border: none !important;
}
Can anybody shed some light on this? Thanks in advance!
The > operator means "direct child of preceding selector". I think you want something like this:
.custom-child-div-name-changeable .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed {
background: none !important;
border: none !important;
}
Either:
.any-old-name .name-cant-be-changed {…}
or
.any-old-name > .cant-change-this > .name-cant-be-changed {…}
The first reads: all elements with '.name-cant-be-changed' who have a parent somewhere with class .any-old-name.
The second reads: all elements with .name-cant-be-changed with an immediate parent of .cant-change-this that has an immediate parent of .any-old-name
If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?
For example, consider following:
<ul class="test">
<li class="one">
<li class="one">
<li class="one">
<li class="two">
<li class="two">
</ul>
I want to add some style to the last li having class "one" (ie. third in the list).
I tried following and it does not work.
ul.test li.one:last-child
That's not possible yet.
:last-child selects the last child, regardless of the tag name, etc.
The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.
Your only option is to add a specific class name to that element, or use JavaScript to add this class name.
Instead of giving class for each li, you can go for nth child where you can assign the style by li number.
If you want to give the separate css for your 3rd li then you need to write
li:nth-child(3) {
color: green;
}
You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/
Jquery code:
var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');