I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link
Your selector is #countdown .num:last-child.
Your HTML is
<ul ID="countdown">
<li> <div ID="days" class="num">00</div> <div CLASS="text">days</div> </li>
<li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div> </li>
<li> <div ID="mins" class="num">00</div> <div CLASS="text">minutes</div> </li>
<li> <div ID="secs" class="num">00</div> <div CLASS="text">seconds</div> </li>
<div class="clear"></div>
</ul>
Think: is .num the last child of its parent? Answer: no.
Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.
Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).
The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:
#countdown li:last-of-type .num,
#countdown li:last-of-type .text{
border:0;
}
Check this http://jsbin.com/apuhep/4/edit#html,live
Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.
Related
I want to use the :not pseudo class as an exception where the css should apply to everything except any element with a certain class including all its children elements.
But in my example, the :not selector is affecting everything, but only should affect the class inside the :not selector. I'm using chrome browser.
fiddle
SCSS:
.ql-editor :not(.not-ql-editor){
ul > li {
background:blue;
}
}
HTML:
<div class="ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<div class="not-ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
I would have expected the top <ul><li> to have blue background, while the lower <ul><li> would not have a background because it has the .not-ql-editor class, but something seems wrong since no li elements get the background.
Update:
After the answer by Johannes I learned that the upper ul needs to be wrapped inside some element because the :not(.not-ql-editor) represents an element even if it doesn't match the selector.
But then I noticed that the "not-ql-editor" element has to be directly underneath the "ql-editor" element. My aim was to target a class at any level beneath "ql-editor".
Normally when you but a space between two selectors, the second selector should target elements at any level beneath the first one. Is this not the case with the :not selector?
update2:
Here is a modified version of the fiddle:
fiddle2
If the html looks like this (with the same css):
<div class="ql-editor">
<div>
<div class="not-ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
</div>
The li's become blue. Despite the css: .ql-editor :not(.not-ql-editor)
The problem in your code is that the first list is on a different "descendant level" than the second list: Your CSS selector is valid only for li elements inside a ul which is child of an element that does not have the .not-ql-editor which again is child of an element that has the .ql-editor class.
For this to work you need another div (or other) wrapper around your first ul:
.ql-editor :not(.not-ql-editor) ul>li {
background: blue;
}
<div class="ql-editor">
<div>
<ul>
<li>hello></li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div class="not-ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
ADDITION after comments and edit of question:
In the first code example you posted, your ul elements were on different descendant levels from the .ql-editor DIV element: The first ul was a directchild, the second one a grandchild, with the .not-ql-editor DIV as a wrapper between .ql-editor and the ul. My answer was directed at this situation, and it worked.
In the second code example you posted, you added another level: A DIV without any class in between the .ql-editor DIV and the .not-ql-editor DIV. This changes things. In the fiddle you added, the .not-ql-editor DIV is the direct parent of the ul. So you need to use that relationship to define a CSS rule that only applies if the ul is a direct child of a DIV that does not have the .not-ql-editor class.
in plain CSS that rule would be as follows:
.ql-editor *:not(.not-ql-editor) > ul > li {
background: blue;
}
Here's your second code example combined with that CSS rule in a snippet, The background does * not* become blue:
.ql-editor *:not(.not-ql-editor) > ul > li {
background: blue;
}
<div class="ql-editor">
<div>
<div class="not-ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
</div>
And here's your second fiddle with this CSS applied as SCSS: https://jsfiddle.net/e7d0h4yc/
You can do this with the original HTML you had. Since the top ul element and the div.not-ql-editor element are siblings, you can just attach the not rule to a wildcard element, and instead of targeting ul > li just target li
.ql-editor>*:not(.not-ql-editor) li {
background: blue;
}
<div class="ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<div class="not-ql-editor">
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
.ql-editor :not(.not-ql-editor){
ul > li {
background:blue;
}
}
Correct this to remove the space between ql-editor and :not
.ql-editor div :not(.not-ql-editor){
background:blue;
}
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed 3 years ago.
I only occasionally have to mess with CSS, so I'm no guru, and I'm trying to wrap my head around adjoining classes (a.k.a. chained classes)...
When I'm in the Chrome inspector and do a 'copy selector', it gives me a selector with adjoining classes; but then CSS Lint gives me a warning not to use adjoining classes.
When I use this code, my style works as desired:
li.operation.post div.content,
li.operation.get div.content,
li.operation.put div.content,
li.operation.delete div.content,
li.operation.patch div.content { border-color: #4C566A; background-color: #2E3440; }
But when I split the selectors up, like the following, the style breaks:
li .operation .post div .content,
li .operation .get div .content,
li .operation .put div .content,
li .operation .delete div .content,
li .operation .patch div .content { border-color: #4C566A; background-color: #2E3440; }
I'm aware that I can ignore the warnings, since they're just warnings, but I'm interested in knowing why it breaks.
Because both are different types of selectors. The selectors are case and space sensitive.
li.operation.post div.content will select
<li class="operation post">
<div class="content">
while li .operation .post div .content will select
<li class="post">
<div class="operation">
<div class="post">
<div>
<div class="content">
When you apply those changes, the style breaks because the browser is not able to process the unavailable element in the DOM.
When styles are joined like:
li.operation.post div.content
Then your html looks like:
<ul>
<li class="operation post">
<div class="content">
//something
</div>
</li>
</ul>
So the classes are wrapped together in one tag basically.
When it's:
li .operation .post div .content
your html looks like:
<ul>
<li>
<div class="operation>
<div class="post">
<div>
<div class="content">
// something
</div>
</div>
</div>
</div>
</li>
</ul>
So it's more hierarchical and cascading into a final element.
i want to change other element outside current element level in CSS3. i have tried to use plus symbol but still not working.
<div id="a">
<div id="a_1">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
<div id="b">
</div>
i want to change #b background-color i try this but not still work
a ul li:hover #b{
background-color:blue;
}
and also tried this but not working too
a ul li:hover + #b{
background-color:blue;
}
You must use JavaScript or JQuery for that.
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}