I have the following html structure:
<div class="nav-collapse">
<ul class="nav">
</ul>
<ul id="registerCart" class="nav pull-right">
</ul>
</div>
and I wanted to apply the following rule only to the first nav, so I did:
.nav-collapse > .nav {
left: 135px;
}
however this is applying to the registerCart as well. How do I apply this only to the first nav?
Use the first child selector:
.nav-collapse .nav:first-child {}
You can combine it with the direct child selector if you have more nested .nav elements.
.nav-collapse > .nav:first-child {}
The > operator means that it will select only the matching children that are a direct child (thus one level deep) of the defined parent, instead of matching all children on all levels from the defined parent.
Using :first-child is perfectly ok but some problems could arise in IE7 and IE8 when dynamic content is involved. See http://www.quirksmode.org/css/selectors for known issues. When in doubt, select the first child by it's class or id attribute.
If you change the class 'nav' to 'nave' it works as is! I suspect 'nav' is a reserved word.
Related
I have tried both nth-of-child and nth-of-type a few times and read documentation on w3schools, css-tricks and mdn but can't figure this out.
It has worked for me in the past but now either nothing happens or all the spans get the css rule applied to them.
I'm just trying to add extra bottom padding to the first, second and eighth with this following markup (repeated 8 times and all lis enclosed in parent ul:
<li class="campaign-links__list-item">
<a class="campaign-links__link " href="/feast-on-london-under-25" id="104014" data-analytics="Category|£25 and Under|offpage">
<img class="campaign-links__image opt-new--campaign-image" src="//img.static-bookatable.com/images/batweb/bat/sub-themes/feast-on-london/feast-on-london-under-25/hero.jpg?width=451&height=150&quality=80&mode=crop" alt="£25 and Under" width="94" height="94">
<span class="campaign-links__text opt-new--campaign-text" style="padding-bottom: 29px;">£25 and Under</span>
</a>
</li>
This is the CSS I've tried:
.opt-new--campaign-text:nth-of-child(1), .opt-new--campaign-text:nth-of-child(2), .opt-new--campaign-text:nth-of-child(8) {
padding-bottom: 29px;
}
.opt-new--campaign-text:nth-of-type(1), .opt-new--campaign-text:nth-of-type(2), .opt-new--campaign-text:nth-of-type(8) {
padding-bottom: 29px;
}
Many thanks in advance!
There's no such thing as nth-of-child, use nth-child. However you are selecting for the opt-new--campaign-text class which is a span. This span is the first child of type span, and second child of an a element.
What you're probably looking for is:
.campaign-links__list-item:nth-child(1) .opt-new--campaign-text {
padding-bottom: 29px;
}
and so on. This selects the first (in this case li) child of the ul element, finds the .opt-new--campaign-text descendant, and adds padding to it.
If I'm understanding you correctly, you're repeating the li.campaign-links__list-item block here? nth-child looks at child elements of the parent element, but .opt-new--campaign-text isn't repeated within it's immediate parent.
Something like this should work:
.campaign-links__list-item:nth-child(1) .opt-new--campaign-text, .campaign-links__list-item:nth-child(2) .opt-new--campaign-text, etc...
I have the following HTML code:
<LI id=treeMenu:2 class="ui-treenode ui-treenode-leaf ui-treenode-unselected" role=treeitem sizset="false" data-nodetype="default" data-rowkey="2" sizcache0014053099738481567="771 85 282">
<SPAN aria-expanded=false aria-checked=false class="ui-treenode-content ui-tree-selectable" aria-selected=false sizset="false" sizcache0014053099738481567="771 85 282">
<SPAN class=ui-treenode-leaf-icon></SPAN>
<DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
<DIV class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<SPAN class="ui-chkbox-icon ui-c"></SPAN>
</DIV>
</DIV>
<SPAN></SPAN>
<SPAN class="ui-treenode-label ui-corner-all">dfvc</SPAN>
</SPAN>
</LI>
I need to add a CSS rule only to LI components that with "ui-treenode ui-treenode-leaf ui-treenode-unselected" class and Besides applies for this div component that is inside on LI:
<DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
I've created the following rule but doesn't work
li .ui-treenode-leaf span div .ui-chkbox {
position: relative !important;
top: -15px !important;
}
I'm working on IE8 and this is HTML generated from node (node without leaf) of Tree component of "Primefaces" (Tree Component on showcase example)
What is the correct CSS rule?
One problem you have is that your rule is looking for a tag with class 'tree-node-leaf' within an li.
To indicate that you want to target a tag with a specific class, do not put a space between the tag and class.
li.tree-node-leaf targets an li with that class.
li .tree-node-leaf targets a tag with the class tree-node-leaf within an li.
The same is done with ID selectors, li#id targets an li with the ID of id. li #id targets an element with ID id within an li.
As Pavlo has said, you should try to keep your selectors as simple as possible - it greatly increases maintenance and reduces the chances of small mistakes becoming big problems.
Try this:
li.ui-treenode-leaf span div.ui-chkbox {
position: relative !important;
top: -15px !important;
}
It depends on what kind of hierarchy you want in the CSS selectors. If you already defined meaningful class names, there should be no need to include type selectors. It doesn't matter, if you implement ui-treenode-leafs with a div or a li element.
.ui-chkbox should already be sufficient to add styling information, unless you need different styles in specific contexts. But even then .ui-treenode-leaf .ui-chkbox should be all you need.
You also should not use !important. When you have the need to use important, you should think about your classes and about how specific your (other) selectors are.
we have a partial html:
<ul>
<li class="class1">AFFECTED</li>
<li class="class1 class2">NOT</li>
<li class="class1">NOT</li>
</ul>
<ul>
<li class="class1 class2">NOT</li>
<li class="class1">AFFECTED</li>
<li class="class1">NOT</li>
</ul>
<ul>
<li>NOT</li>
<li class="class1">AFFECTED</li>
<li class="class1">NOT</li>
</ul>
I need a universal css-selector for the first li's of any list with only class1.
li's with extra classes (class2) MUST NOT be affected.
only first li with class1 should be selected (to change the
appearance of A.
no JS/jQuery.
li's are float, so no hard coded nth-child.
code is generated automatically, so no way add/remove custom classes.
I've tried to use :not(class2), [class2] :first-child & :first-of-type but with no avail.
Thanks!
Solution: http://jsfiddle.net/6hxZa/3/
You should be able to capture only the elements with .class1 and no other using this selector:
li[class="class1"]
You won't be able to match only the first out of these elements because there isn't a selector to do that. :first-child only selects the very first child within the ul regardless of what classes it has, and :first-of-type selects the first li, also regardless of its classes (effectively making it the same as :first-child for li elements). You'll have to use the technique given here (where it also explains why these two pseudo-classes don't work) to apply the rule to all such elements then undo it for subsequent ones:
li[class="class1"] {
/* Apply styles... */
}
li[class="class1"] ~ li[class="class1"] {
/* ... and remove them after the first */
}
Note that the same selector is used so both classless elements and elements with .class2 are completely unaffected.
This jsFiddle demonstrates the desired effect with the provided HTML: http://jsfiddle.net/Cmypc/4/
If you want to specifically exclude class2 from the selector, use:
li.class1:first-child:not(.class2) { }
If you want to exclude any additional classes other than class1 use:
li[class=class1]:first-child { }
I would recommend the first if you know which class(es) you're excluding as it will interfere less with other/future styles.
jsFiddle of #1: http://jsfiddle.net/Cmypc/
jsFiddle of #2: http://jsfiddle.net/Cmypc/1/
EDIT If you're looking for a :first-of-class selector, there isn't one (see this thread). A future solution may be the :nth-match selector but you'll have to wait for CSS4. Alternatively, you can use a more elaborate clearing selector to undo the styles applied (see BoltClock's answer) as a workaround.
Try this
li:first-child
{
...
}
this is only for class 1
li.class1:first-child
{
color:#ff0000;
}
and here is a fiddle
and if you dont want the list with class2 to be affected
maybe this can work for you
li.class1.class2:first-child
{
...
code that will reset
}
For example I have a menu block with menu elements:
.menu
.menu__element
.menu__element--current
But lets say .menu block is contained inside another block, .header
How to deal with naming in this case?
.header
.header__menu
.header__element
or
.header
.header__menu
.header__menu__element
or
.header
.menu
.menu__element
Consider using "mixes" (more than one BEM entity on the same DOM-node):
<div class="header">
<ul class="menu header__menu">
<li class="menu__element"></li>
<!-- ... -->
</ul>
</div>
So block menu is also element header__menu at the same time. That gives you the ability to apply styles for any abstract menu and add special rules for that particular menu inside the header.
The menu should be a class unto itself so .menu should suffice. If it's a menu that is ONLY in a header and never anywhere else, then .header-menu. Then you can point to the menu directly without going through the header class.
If you prefer to do it the way you outlined, then .header_menu.
<div class="header">
<ul class="menu">
<li class="menu__element">...</li>
<li class="menu__element menu__element--current">...</li>
...
</ul>
</div>
.header {...}
.menu {...}
.menu__element {...}
.menu__element--current {...}
will be right.
Block name does not change when block inserted into another block.
BEM prohibits put an elements in the elements and write classnames like block__element__element, more info: How to properly set an element's scope using BEM?
Here's what the official documentation of BEM says (http://getbem.com/faq/#css-nested-elements);
No matter how deep you're nesting, you always use the top parent as block element. So basically it would be;
.header
.header__menu
.header__element
I'm trying to create a dropdown menu using CSS, it's centered around using the following:
#submenu_div {
display: none;
}
#li_id:hover + #submenu_div {
display: block;
}
EDIT:
Here's the fixed HTML for the entire thing.
<ul id="main_nav">
<li id="li_id">Home</li>
<ul id="sub_who">
<li>Foo</li>
</ul>
</ul>
The #submenu_div is outside the parent div for the ul in which the li the previous code refers to resides. As far as I know, this should work. But I'm obviously doing something wrong, any ideas?
The #submenu_div is outside the parent div for the ul in which the li the previous code refers to resides.
The + combinator looks only for a true sibling element, i.e. an element with the same parent as whatever matched the left-hand side of the +. You cannot make it match anything else. You will need to change either your HTML (so that #submenu_div is a true sibling of #li_id) or your CSS (so the thing on the LHS of the + is a true sibling of #submenu_div) or both.
Without seeing the structure of your HTML I cannot give more precise advice.