I'm using Foundation. I've got a dropdown menu structured like so:
<div class="dropdown"><ul><li>...
I want to change the font size of all the elements in this menu. However, when I try to target them with .dropdown { font-size: 0.5em; }, I get overridden by this rule from the Foundation styles: ul, ol, dl { font-size: 1rem; }.
Is my only recourse to target the list elements specifically? i.e. .dropdown ul { font-size: 0.5em; }. This introduces a lot of unwanted specificity. To make matters worse, there's a second font-size rule for nested lists, so I would have to account for that as well with even more specific selectors. Seems like I'll trip over this a lot.
Am I missing something? How do I make this not such an annoyance?
You will need to either make your styles more specific or alter the default size for all lists.
The reason being ul, ol, dl { font-size: 1rem }. If it had been using em or % instead, then it would have happily taken its context from the ancestor element (.dropdown in this case, which is .5em).
So, you could either do this:
ul, ol, dl {
font-size: 1em; // or 100%
}
Or
.dropdown ul, .dropdown ol, .dropdown dl {
font-size: 1em; // or 100%
}
They'll both do what you're looking for without the side effects that would come along with your proposed styles when there's nesting involved (.dropdown ul { font-size: .5em }). The second option I've provided should be specific enough to override styles for nested lists.
Related
I have body * { padding: 0; }. This removes all padding from list. Without removing the CSS, what can I add that can bring back padding for lists ?
The default padding for list elements is 40px.
Note that setting a padding on list elements also removes their bullet, so you'll also probably want to add this back in with list-style-position: inside. This offsets the bullet a little bit, so you may want to go with 30px of padding instead.
body * {
padding: 0;
}
li {
padding: 0 30px;
list-style-position: inside;
}
<p>No padding</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
However, a better option would be to simply not set padding on the list elements in the first place.
Add your own back in. You have to make it as "specific" are the reset itself.
body ul, body ol { padding: (your value) }
See: http://cssspecificity.com/
Fundamentally I'd question the approach of using body * { padding: 0; } since it's far too broad a rule to reasonably apply to a well-structured layout, but in your case, you could do a couple things.
body ul, body ol { padding: 15px; }
The above will add padding to the list wrapper, but you may also want to cover the listitems as well.
body li { padding: 15px; }
Both of the above options would need to come after your existing removal of the padding.
The final alternative would be to use a not selector instead of your body * selector.
body :not(li) { padding: 0; }
Or, to protect ul, ol, and li:
body :not(li):not(ul):not(ol) { padding: 0; }
.content p, .content ul, .content h1 {
text-indent: 35px;
}
Are there any shortcuts for this selector, like .content p, ul, h1 {}?
With normal CSS you do not have a choice.
With CSS compilers like SASS or LESS you can write something like that:
.content {
.p, ul, h1 {
text-indent: 35px;
}
}
I nowadays highly recommend using Compass which makes writing CSS so much more fun.
There is a :matches() functional pseudo-class in Selectors Level 4 (aka CSS 4):
.content :matches(p, ul, h1) {
text-indent: 25px;
}
However, it isn't supported by any browser yet. But there are :-webkit-any() and :-moz-any() that bring the same functionality to Chrome and Firefox respectively.
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
Is there a way to increase the size of just the bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style> tags within the <head> tag.
Might not work in old version of IE.
li:before{ content:'\00b7'; font-size:100px; }
Demo
For IE6:
Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.
I have had to do something similar. My method was to add a span tag around the text within the li:
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
Then you can increase the font-size of you li and reduce the font size of your span:
li {
font-size: 20px;
}
li span {
font-size: 14px;
}
You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.
To increase the size of the bullet you can use
li::marker
{
font-size: 2rem;
font-weight: bolder;
}
and to change bullet character, the content property will work
li::marker
{
content: '\2746';
font-size: 2rem;
font-weight: bolder;
}
When you say you can't use images, do you mean you can't edit the li tags to add images, or that you can't use an image at all?
On the li elements, you can set the list-style-image property.
li {
list-style-image: url('/imagepath.png');
}
This can still go in your head tag without editing the markup of the list.
no way that I'm aware of.
but you could fake it by using :before
ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)
#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.
<div>
<ul>
<li><p>Hello</p></li>
</ul>
</div
div ul li {
/*this will style the bullets*/
}
div ul li p {
/*this will style the text*/
}
In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.
I want to clone the menu of a hardcoded site (edit removed link)
How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?
In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.
My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}
The last CSS rule written is the one that is used, but specificity takes priority over cascading.
An article on specificity: http://css-tricks.com/specifics-on-css-specificity/
So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.
yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).
Change it to:
#block-system-main-menu div ul li ul li.leaf {
I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.
Edit: sorry, I can see you just figured that out