Markup:
<li class="divider"></li>
<li class="active">Home
<li class="divider"></li>
<li>Blog</li>
How do I add a style the first .divider only if .active is the next sibling?
I was thinking of .divider + .active but that would apply styles to .active.
.divider {
border-left: 1px solid #d0d0d0;
}
.active {
background: #fff;
}
// when the next sibling is .active, border-color: transparent;
You cannot select a previous element in CSS as of now, what you can do is either manually target the class by providing some distinct class to it like
<li class="divider target_me"></li>
And than simply use
ul.class_name li.target_me {
/* Styles goes here */
}
Else, if it's the first child of li
You can use ul.class_name li:first-child, if it's not, simply use nth-of-type(n), substitute n with the nth number of your li, this way you don't need to call classes too.
For example
ul.class_name li:nth-of-type(2) {
/* Styles here */
}
The above selector will select 2nd child of ul element with that specified class name.
Still not happy with CSS? You can opt for JS/jQuery solution, but if the markup is static, I would suggest you to use nth and if you have access to markup you can atleast call class on the element you want to style..
Note: You cannot nest li tag as a direct child to li, consider changing your markup to below ..
<ul>
<li>
Home
<ul>
<li>Sub</li>
</ul>
</li>
</ul>
This could work for you:
div {
color: black;
float: right;
}
.active + div {
color: pink;
}
<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>
Fiddle
CSS doesn't have direct support for this as of now, but jQuery makes it relatively painless, and assuming this is a requirement for your project, could well be the way to go.
In jQuery it would be written something like this:
if element.next().hasClass('active'){
element.addClass('divider')
Here's a Fiddle
CSS
.divactive {
border-left: 1px solid transparent;
}
jQuery
$(function() {
$('.active').prev('.divider').addClass('divactive');
//or
$('.active').prev('.divider').css({ 'border-left': '1px solid transparent' });
});
Related
I imported a third party CSS (which I'm not allowed to modify) into my application. This CSS file is declaring a class name and a selector, e.g.:
.third-party-class{
color: blue;
}
.third-party-class:last-of-type{
color: red;
}
My goal is to remove the .third-party-class:last-of-type selector completely by using CSS only. Of course you could just override the .third-party-class:last-of-type selector and copy every property from .third-party-class. But this is really inconvenient if .third-party-class has a lot of properties.
.third-party-class{
color: blue;
}
.third-party-class:last-of-type{
color: red;
}
.desired-li{
color: blue;
}
<div>
Currently:
<ul>
<li class="third-party-class">one</li>
<li class="third-party-class">two</li>
<li class="third-party-class">three</li>
</ul>
Desired:
<ul>
<li class="desired-li">one</li>
<li class="desired-li">two</li>
<li class="desired-li">three</li>
</ul>
</div>
Question
Is it possible to override/remove a CSS selector completely, without redeclaring all properties of the "base" class by using CSS (no JS) only?
Since we are dealing with last-of-type and you cannot change the CSS, you can add an extra element that will trigger this selector and hide it (I suppose you are able to adjust the HTML):
.third-party-class {
color: blue;
}
.third-party-class:last-of-type {
color: red;
background:pink;
font-size:250px;
opacity:0.9;
display:flex;
vertical-align:sub;
/*doesn't matter what CSS you will have here*/
}
ul li:last-of-type {
display:none!important;
}
<ul>
<li class="third-party-class">one</li>
<li class="third-party-class">two</li>
<li class="third-party-class">three</li>
<li></li>
</ul>
I agree with the comment that BenM made to your original question.
But...If the CSS is as simple (only one line) as your fiddle leads me to believe you could just use "!important" on the selector you want to overwrite.
.third-party-class:last-of-type{
color: blue !important;
}
That would allow you, on a selector by selector basis (assuming there are more than just color being used), specify what you want the third party code to do.
You could use the [attribute^=value] Selector, it will overide every ellement who starts with "value" so you can make something like this:
.third-party-class{
background: blue;
height: 20px;
width: 20px;
margin-bottom: 10px;
}
.third-party-class:last-of-type{
background: red;
}
div[class^="third-party-class"]{
background: green;
}
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
Sorry if i do not understand it right
I had to Create a working HTML/CSS for the following nestes list
root
child1
child11
child2
child21
child22
child3
child31
So for this I created the following
HTML
<ul class="list-view">
<li>
<ul><li>Chlid11</li></ul>
</li>
<li>
<ul>
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li>
<ul>
<li>Chlid31</li>
</ul>
</li>
</ul>
Now How will I be able to apply CSS to the leaf parent and root node .
I have to make Leaf to green , parent to red and root should be like parent but with underline
Here Leaf are
Child: 11 , 21, 22 , 31
Parent: the three li
root will be :the first ul
This was a question asked to me in an Interview I am just trying to solve it
Css has to be dynamic . I mean I was not suppose to add classes directly saying what is leaf and what is root .
Something like this
Jsfiddle
UPDATE
CSS
.list-view> li:first-child{
color:red;
text-decoration: underline;
}
.list-view> li ul li {
color:red;
}
.list-view> li ul li ul li{
color:green;
}
I am not able to make just the root node underline
Thanks
I am going to take a stab in the dark, so please don't shoot me if i jumped the gun. But here is my understanding of what he is talking about.
<ul class="root">
<li class="parent">
<ul class="leaf">
<li>Chlid11</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid31</li>
</ul>
</li>
</ul>
CodePen for example
first of all, your markup does not make very much sense to me. Nesting ul's inside li's is not very useful when the li's do not contain any other content. I suppose your markup should look more like this:
<ul>
<li>
<span>Root</span>
<ul>
<li>Parent</li>
<li>Parent
<ul>
<li>Leaf</li>
<li>Leaf</li>
</ul>
</li>
</ul>
</li>
<li>Root</li>
</ul>
When it comes to targeting each level with css, you have a number of options. Adding classes to each level may seem the most straight forward, but it can be harder to maintain, and it is easier to make mistakes. Others have already demonstrated this technique, so I'll limit myself to a few alternatives:
option 1a:
ul { /* root + parent + leaf */ }
ul ul { /* parent + leaf */ }
ul ul ul { /* leaf */ }
option 1b:
li { /* root + parent + leaf */ }
li li { /* parent + leaf */ }
li li li { /* leaf */ }
option 2:
ul > li { /* root + parent + leaf */ }
ul > li > ul > li { /* parent + leaf */ }
ul > li > ul > li > ul > li { /* leaf */ }
That is basically it I guess, though you could come up with some variations. Option 1a and 1b are equivalent. Option 2 is more specific, and can be useful when trying to overwrite certain styles. It is considered good practice to keep your selectors as little specific as possible though. This way you can overwrite them easier later on, and your selectors do not get ridiculously long. It just keeps your code easier to read and maintain, so I would definitely go for option 1 in this case.
Note that this technique requires you to overwrite your styles. The styling you requested could ie. be achieved by doing something like this:
li {
color:red;
}
li span {
text-decoration: underline;
}
li li li {
color:green;
}
The pseudo classes you speak of in the comments (:nth-child, ...) are irrelevant here. They are meant for distinguishing between siblings, not for parent-child relations.
edit:
the text-decoration property is a bit tricky to overwrite. Have a look at the specs on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.
To solve this, you have to make sure the element with the underline is not the parent of the rest of your tree. Th easiest way is to put it in a span and apply the underline only to that:
http://jsfiddle.net/r616k0ks/3/
(I have updated my code samples above accordingly)
Using some specific selectors you can create almost any selection without using classes on the child elements.
I don't know if this is what you're getting at:
/* Root */
.list-view { background: grey; }
/* First level li's */
.list-view > li { background: red; }
/* First level of ul's */
.list-view > li > ul { background: orange; }
/* Second level of li's */
.list-view > li > ul > li { background: purple; }
/* Second level of li's, first element */
.list-view ul > li:nth-child(1) { background: green; }
/* Second level of li's, all other elements */
.list-view ul > li:nth-child(1n+2) { background: blue; }
See link https://jsfiddle.net/6d3g3zLm/
If not, feel free to elaborate on your question.
Have you tried adding classes to your html?
https://jsfiddle.net/w7tx52L5/
HTML
<ul>
Root
<li class="parent">
Parent1
<ul class="child"><li>Chlid11</li></ul>
</li>
<li class="parent">
Parent2
<ul class="child">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
Parent3
<ul class="child">
<li>Chlid31</li>
</ul>
</li>
</ul>
CSS
.root {
color: red;
text-decoration: underline;
}
.parent {
text-decoration: none;
color: red;
}
.child {
color: green;
}
Edit
from your comment it appears you need to use :nth-child selectors. That wasn't clear from your original question. try this css -
ul {
color: red;
display: inline-block;
width: 100%;
text-decoration: underline;
}
ul li {
display: inline-block;
width: 100%;
text-decoration: none;
color: red;
}
ul li:nth-child(odd) > ul li:first-child {
color:green;
}
ul li:nth-child(even) > ul li {
color: green;
}
The workaround of display: inline-block and width:100% is because text-decoration affects all nested elements as well. http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Add classes to the list elements as Geoffrey has shown in his answer. Then apply styling to the classes as you would any styling. If you don't know CSS or anything about how to style, I would suggest researching a little more before you ask these kinds of questions, as this stuff is relatively easy to learn if you put some time and effort into it. http://www.w3schools.com/css/
Good day all.
I have a problem, a structure like this:
<ul>
<li>
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li>
<span><span>
</li>
</ul>
I would like to select the first and last that have selected on the parent... the pseudo code should be like this:
li.selected span { background: #FF4D6E; color: white; }
li.selected:first-child span{border-radius:30px;}
li.selected:last-child span{border-radius:30px;}
the problem is that the span is inside the collection of .selected so I would like to have the first .selected, and its span
That is not possible because .selected class element is not the first of its parent. But you can do a workaround here by using sibling selectors as shown below:
/* first child */
li.selected span{
border-radius: 30px;
}
/* middle children */
li.selected + li.selected span{
border-radius: 0px;
}
/* last child */
li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Above code is assuming you have only three .selected elements. If you have more and you know the count then change the last child code in the above with respect to the count. For example, if you have four .selected elements.
li.selected ~ li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Example Fiddle
If you are using jQuery then do this:
$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff");
$("li.selected:first-child span").css("border-radius" : "30px");
$("li.selected:last-child span").css("border-radius" : "30px");
To do this, I recommend taking a few hours to learn jquery. Here is a link to a good jquery tutorial. You can finish this tutorial in about three hours.
Jquery allows you to dynamically select any element that you want and modify it in pretty much any way you can imagine.
This is the code I would use to modify the CSS of the first and last span elements with .selected parents:
var $childOfSelected = $('.selected').children('span')
$childOfSelected.last().css({'border-radius':'30px'});
$childOfSelected.first().css({'border-radius':'30px'});
For the first child you can use this
li.selected span {
background: #FF4D6E;
color: white;
}
.selected:first-child,
:not(.selected) + .selected span {
border-radius: 30px;
}
<ul>
<li>
<span>not</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li>
<span>not</span>
</li>
</ul>
I do not want that the same color is side by side. At the moment: 1-2-1-1-2 but It must be: 1-2-1-2-1
HTML
<ul class="list list-unstyled">
<li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
<li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
<li>Covers<span class="pull-right">255Kb</span></li>
<ul>
<li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
</ul>
</ul>
CSS
.list li:nth-child(even) {
background: transparent;
}
.list li:nth-child(odd) {
background-color: rgba(255,255,255,0.05);
}
First, you need to correct your HTML. The ul element can't be nested directly in another ul, it must be inside one of the lis:
<ul class="list list-unstyled">
<li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
<li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
<li>Covers<span class="pull-right">255Kb</span>
<ul>
<li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
</ul>
</li>
</ul>
Then, when you get the correct markup, you can redefine the order of colors for sub-items of the odd items of the main list:
.list li:nth-child(odd) li:nth-child(odd) {
background: transparent;
}
.list li:nth-child(odd) li:nth-child(even) {
background-color: rgba(255,255,255,0.05);
}
This is because the :nth-child selector only looks at the position within its direct parent. To fix this, you can remove the li tags outside of their ul and indent them by giving them a class that contains the indentation style.
I'm having some problems getting my CSS selector to pick the parent link only.
<style>
.sidebar .nav li a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
</style>
<div class="sidebar">
<ul class="nav sidenav">
<li>
Menu1
<ul class="nav">
<li>Item1</li>
</ul>
</li>
<li>
Menu2
<ul class="nav">
<li>Item1</li>
</ul>
</li>
</ul>
Unfortunately.. the style applying to ALL links in the nav, my alternative is to put a class on all of the links I want styled, but rather not have to do that.
http://jsfiddle.net/bFxm4/
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by >.
CSS 2.0 Specifications - Selectors, 5.6 Child selectors
.sidebar .nav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
Demo
this work DEMO :
.sidebar .nav.sidenav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
The ">" means : picks the ones which are directly child
I think that putting a class on all of the parent links is fine. Especially is you are using some loop on the back end to generate the html, then adding a class to each one is simple.
If you're trying to get the style to apply to .sidebar .nav li a only, and not the links in the nested lists, you can change your selector to read like this: .sidebar .nav > li > a. This targets <a> tags that are direct descendants of <li> tags only, and only those that are in the top level list. It won't go any deeper.
try this:
.sidebar > .nav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
hope this helps