I have a simple list, which I managed to get in a line and have background image for all items. However I want to have some of the list items(List item 3) to have a different background image. Is there a way to do this without using !important? My code is Below.
The CSS
.my-list li {
list-style: none;
display: inline;
background-image: url(../images/butn-bg.png);
}
.different-bg {
background-image: url(../images/butn-bg-1.png);
}
The HTML
<div class="my-list">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li class="different-bg">List item 3</li>
<li>List item 4</li>
</ul>
</div>
Thanks
You just need to increase the specificity of your selector:
.my-list li {
list-style: none;
display: inline;
background-image: url(../images/butn-bg.png);
}
.my-list li.different-bg {
background-image: url(../images/butn-bg-1.png);
}
See Calculating a selector's specificity
Look my example: jsfiddle
Everything is working correctly.
Try to make more common styles, and write them as a complement changes.
Add this to your css:
.my-list .different-bg {
background-image: url(http://placekitten.com/g/200/300);
}
If you are interested, more details can be found here: get specific css styles
Related
I am trying to remove some bullets points, and replace them with ticks. I can make it work, but then my menu bar mess up. So I need to add a class to the <ul>, so it is not affecting anything else.
I tried to add a class, but still not working. Why?
Not working: Not working
Working but mess up my menu bar: Working
HTML:
<ul class="removeBulletAddTick">
<li class="removeBulletAddTick"> Test text 1</li>
<li class="removeBulletAddTick">Test text 2</li>
<li class="removeBulletAddTick">Test text 3</li>
</ul>
CSS:
ul removeBulletAddTick{
list-style: none;
}
ul li:before {
content: '✓';
}
Update
When I do your suggestion my menubar messed around:
Screenshot of menubar
As it turned out, the class selector wasn't declared correctly, it was missing the period (.) and should be .removeBulletAddTick.
The code below demonstrates this, you'll notice the class in question added to the list item rules as well for more specificity - this is to ensure that these rules will only apply to the list items you intend them to; which are those with the classes .removeBulletAddTick.
ul .removeBulletAddTick {
list-style: none;
}
ul li.removeBulletAddTick:before {
content: '✓';
}
Updated JSFiddle
You don't even need to declare that class on every list item. It would be better to declare it on the containing parent element, as follows:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
Code Snippet Demonstration:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
<ul class="removeBulletAddTick">
<li>Test text 1</li>
<li>Test text 2</li>
<li>Test text 3</li>
</ul>
I'm using FontAwesome icons as custom bullets for my unordered lists, but using li:before seems to change the behavior of paragraph tags in list items.
See this JSFiddle for a paragraph tag in action in two different lists. One with li:before, one without.
HTML:
<ul class="before">
<li>list item 1</li>
<li>
<p>list item 2 (paragraph)</p>
<p>list item 2 (sub paragraph)</p>
</li>
<li>list item 3</li>
</ul>
<br />
<br />
<ul>
<li>list item 1</li>
<li>
<p>list item 2 (paragraph)</p>
<p>list item 2 (sub paragraph)</p>
</li>
<li>list item 3</li>
</ul>
CSS:
.before li:before {
content:"B4";
color: red;
margin-right: 8px;
}
How can I get list item paragraphs to appear on the same line as the li:before?
Being that paragraphs are block elements, they will start a new line... that is, unless you float the item in front it. There are some other styling issues which arise from this, but I'm sure you can figure those out (I compensated for some of the issues in my example):
http://jsfiddle.net/ryanwheale/ko2efv7b/2/
.before li:before {
content:"B4";
color: red;
margin-right: 8px;
float: left;
}
You should probably accept Ryan's answer, but in case you want a much more hackish answer that doesn't require you to know the width of the before content, here's my attempt:
Fiddle with hiding dots
CSS
.before li {
list-style: dot outside none;
}
.before li:before {
content:"B40M8UW0T?";
color: red;
margin-right: 8px;
float: left;
list-style: dot outside none;
display: list-item;
position: relative;
z-index: 2;
background-color: white;
}
Fiddle with a green background illustrating the hack
So, basically we're telling the browser to display that :before pseudo to display as a list-item itself, and then hiding the resultant bullet point for the actual list item by matching the background-color of the underlying element. In the fiddle I left the ul green to illustrate this happening.
It's not a perfect solution, but there won't be a perfect solution for what you're looking to do without a tremendous amount of effort.
Cheers.
When I'm trying to select all direct child of a parent element using ">", it works with some properties like border and all, but not with font-properties like color, font-weight etc..
My HTML is
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
CASE1 CSS:
ul>li {
color:#F00;
}
But here the color:#F00 property gets applied to all the "li" elements, But i want it to get applied only for the direct "li"s of "ul".
CASE 2
CSS:
ul>li {
border: solid 1px #000;
}
This one works well for me and the border gets applied only to the direct li child only.
I know it can be resolved by overriding with some other classes and all. But i want to know, why some css properties get inherited and others not.
It's happening due to the default inheritance capability of certain CSS Properties. Values of these kind of properties will be transmitted to the child by default.
This document from W3C gives detailed list of inheritance in various CSS properties. Full property table
try this
Demo
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
css
ul > li {
color:#F00;
}
ul > li > ol > li {
color:#000;
}
try this
ul > li ol li {color:black;}
As the listing element has been inheriting the color property from its parent, you need to override it.
You can add below style before yours as like
li {
color: #000;
}
ul>li {
color:#F00;
}
It overrides the color: inherit value.
I think you might find the answer you need here: http://www.w3schools.com/cssref/sel_firstchild.asp
You should be able to select these elements with
ul:first-child {
// css
}
Hope this helps
So I have a menu, 4 menu points and I want to put them in a square 2x2. Is there a way to do that WITHOUT having a class for the first two and one for the other ones?
Thanks for any help :)
UPDATE:
I did mess around a little more and I'm using the flex box structure, I'm sorry for not posting this information:
ul {
-webkit-box-orient: horizontal;
}
ul li {
-webkit-box-flex: 1;
height: 44%;
margin: 3%;
}
Sure. For one, you can use floating and set the widths accordingly. See the example below, or http://jsfiddle.net/BUPX7/ for a live example.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
ul {
width: 200px;
}
ul li {
width: 100px;
margin: 0;
padding: 0;
float: left;
}
There is a line break between div elements by default. You are apparently using some CSS to override that. You need to modify the CSS code accordingly, or select a different approach.
The simplest way, assuming ”menu points” are links, is to use
<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>
But if you are using some elaborated markup and wish to create the break in CSS alone, then you may need some elaborated selectors like :nth-child(3).
I'm building a navigation bar inside a ul. Most of the menu items have long titles so I really need to wrap them over a number of lines, as in the following code (I've inserted br/ where I'd like the returns)
<ul>
<li class="cell01on">Menu 1</li>
<li class="cell02">Menu2.1<br/>Menu2.2<br/>Menu2.3</li>
<li class="cell03">Menu 3</li>
</ul>
I'm trying to get the effect similar to using a table and vertically centring each row in it's cell. Is it possible to recreate the same in a ul?
thanks in advance
Giles
First of all if I read correctly that Menu 2.1 is a submenu then a cleaner could would be:
<ul class="menu">
<li class="active">Menu 1</li>
<li>Menu 2
<ul>
<li>Menu2.1</li>
<li>Menu2.2</li>
<li>Menu2.3</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
Vertical alignment is generally hard to do in CSS outside tables, but have a look at:
http://www.student.oulu.fi/~laurirai/www/css/middle/
I tend to agree with Nux's answer, submenu's should be nested lists. As to your question about vertical centering: if you want things to behave like tables visually, you can simply use display: table;:
<style>
ul { list-style-type: none; padding: 0; display: table; }
li { display: table-cell; vertical-align: middle; }
</style>
u can add some styling like
li
{
white-space:pre-wrap;
width://set width here
text-align:center;
vertical-align:middle;
}