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.
Related
I'm trying to style all elements inside a class while excluding a specific one and it's children. I've made several attempts using the :not() selector but I could not achieve what I want. Any thoughts?
<div class="orange">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div class="list">
<ul>
<li> li text 1</li>
<li> li text 2 </li>
</ul>
</div>
</div>
Here is the link with the html and the styles.
https://stackblitz.com/edit/js-p7krtp?file=style.scss
Use ">" the child combinator:
.orange {
> :not(.list){
color: orange
}
}
This selects all children of .orange that do not have the .list class.
What best worked for me while trying to find a solution for this approach was trying it out in a fiddle. I find the accepted answer not exactly correct because the syntax should be:
.orange > :not(.list)
{
background-color: orange;
}
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)
Closed 3 years ago.
I have a navigation item in a div, I just want to target this one with an attribute value, But my CSS does not work so far. Code so far below is:
I am trying to target the navDepts class
HTML
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->
</ul>
</div>
</div>
CSS
.primary-nav [data-name="about"] .subNav ul .navDepts {
display: none!important;
}
Try removing ul from your CSS. Because ul and .navDepts are on the same level.
.primary-nav[data-name="about"] .subNav .navDepts {
display: none!important;
}
Your CSS inheritance is not proper:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->sadsadsad
</ul>
</div>
</div>
I found two mistakes in your code.
First one is that there should not be any space between attribute selector and related class.
Second, I presume that you mean to select ul with .navDepts class. So I removed the space between them.
So here is the corrected css:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
width: 100px;
height: 100px;
}
.primary-nav[data-name="about"] .subNav ul.navDepts li{
background: yellow;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<li>list item</li>
</ul>
</div>
</div>
Add this CSS . May it will help you out.
.primary-nav [data-name="about"] >.subNav ul.navDepts {
display: none;
}
This is my Mixin:
.dialog-inputs() {
:not(.input-list) {
label,
input,
select,
textarea {
width: 100%;
display: block;
}
}
}
I Want that all inputs etc, got this 2 Styles when its no UL around there with class .input-list... But this Less Code dont work =/ Any Idea?
The problem is that the sub-selectors of a selector are applied to all elements that they can be applied to.
Simplified, if you have this
.block :not(.list) input {background:red}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
In the above example, the input is red because the div matches .block and the li matches :not(.list)!
So the solution in this simplified example is to just make the :not(.list) more specific by adding ul in front of it.
.block ul:not(.list) input {background:red}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
However, that won't always do the trick. In your code, you have nested uls, which will complicate matters.
Therefore, a more thorough solution is to write out in full what your intention is: "make all inputs red, except the ones in .list lists, which should have the default color".
.block input {background:red}
.block .list input {background:initial}
<div class="block">
<ul class="list">
<li>
<input/>
</li>
</ul>
</div>
This is a bit longer, but it will work, no matter what!
By the way, sorry I can't use your exact source. Stack snippets don't support LESS (or, I don't know how to make LESS work in a snippet). But I hope you get the point and you can adapt this to your needs.
The Problem was only that i forgot the & Symbol in before the ul =)
.dialog-inputs() {
"&"ul:not(.input-list) {
label,
input,
select,
textarea {
width: 100%;
display: block;
}
}
}
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;
}
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.