I am trying to apply my CSS file to 2 of my lists
<ul class="list1">
<li>Cat</li>
<li>kittens</li>
</ul>
<ul class="list2">
<li>Pizza</li>
<li>Popcorn</li>
</ul>
I want only one of them to be inline so I'm trying
ul.list1 {
display: inline;
}
but the inline won't work unless I do
li {
display: inline;
}
which applies to all my lists. How do I make it son only inline affects one list?
I'm guessing you want one of the lists to be horizontal, like so:
.list1 li { display: inline; }
Look up how to use descendant selectors, it is one of the basic powers of CSS.
Increase the specificity of your selector. For example...
ul.list1 li { display: inline; }
For further complexity as an example... If you have both of these lists appearing twice in your site, once inside a div with the ID #content, and once inside a footer widget with ID #widget. Then you can target the list inside #content by typing.
#content ul.list1 li { display: inline; }
Here is a link to an article to the W3C Wiki on CSS3 Selectors
The above link will give you everything you need to know concerning combinators, pseudo-selectors and pseduo-elements. Learn this and you can conquer the internet.
Use
.list1 li {display:inline;}
The following code will make all of your listings inline, as I can understand, this is not your intention.
li {
display: inline;
}
Instead, you should specify that you only want one of the lists elements to have this style. You should therefor use the following code.
.list1 li {
display: inline;
}
This will make all list entries within the list1 class inline.
Related
Lets say i have this structure :
<li>Something something <input type="checkbox"></li>
How could i apply a simple text-decoration: line-through; to li content when checkbox is checked ?
I tried this with no luck using the & sass selector :
li {
& input:checked {
text-decoration: line-through;
}
}
EDIT :
I appreciate all the answers,however i was looking to do this using sass,i thought the & parent selector has this functionality but after i researched a little bit,i found out its not meant to be used that way.
Nevertheless,i found a solution without tweaking my structure or add javascript,i found out that bootstrap does not constrain you to place the checkbox after the li content in order to show it in the far right position,you can place it before and it automatically sticks it to the right,so i did that and placed the li content inside a span,so i just selected input:checked + span which gave me the desired result.
You can't do it. A Element has only access to his child and siblings.
With the siblings there is a neat trick where you can achive a similar result.
At first you need to move your checkbox at the beginning (html) so you can style the next siblings with ~ selector.
Then you can apply some css rules to the parent to swap back to order.
div {
display: flex;
flex-flow: row-reverse;
}
div input[type="checkbox"]:checked ~ span {
text-decoration: underline;
}
<div>
<input type="checkbox">
<span>Hallo Text</span>
</div>
Sorry but you can´t, you need javascript or SassScript to do that, you can try this https://sass-lang.com/documentation/style-rules/parent-selector
You don't need Javascript for this, but you do need to be able to add something to your HTML.
You can do it if you are able to add an element - put the text into its own div and putting it after the input.
Then use CSS grid on the li element, changing the order that the input and the div are shown. This just changes the visual order so you can still use the + sign to indicate the element which is the immediately following sibling of the input.
li {
display: inline-grid;
grid-template-columns: auto auto;
}
li input:nth-child(1) {
order: 2;
}
li div:nth-child(2) {
order: 1;
}
input:checked+div {
text-decoration: line-through;
}
<ul>
<li><input id='input' type="checkbox">
<div>Something something</div>
</li>
</ul>
I have a nested list and I'm having trouble styling the last level UL.
<ul class="same-class">
<li>
<ul class="same-class">
<li>
</li>
</ul>
</li>
</ul>
What I need is to display the first UL items inline, and below them show their children as blocks. The problem is both UL have the same class (I can't change the HTML output, nor add classes), and I can't find the proper selector to target the second UL.
In the example here I tried adding a diferent class to menu 3 and 4, and that does the trick, but since changing class isn't an option I need to find a workaround to make the children display as blocks.
Can someone take a look and advise?
ul ul li { display: block; } or .same-class .same-class li { display: block; } should do the trick - that'll select all li that are a child of two or more ul or .same-class
This might be useful (attribute selectors) depending on what your real code looks like (most likely useful if you're using AngularJS or something similar) or the nth-child might be good too because I'm not 100% sure what you mean.
Hope this helps!
If you try plugging this in, you should be able to target the various components as you like.
The first selector is targeting all list items that are direct children of the first menu.
The second one is targeting any lists inside of a list item which itself is a direct decendant of the menu class.
The third one is targeting just your list items in your nested lists. It gives a good degree of control for adjusting the layout.
ul.menu:first-of-type > li{
display:inline-block;
}
.menu > li ul {
display:block;
}
.menu:first-of-type > li > ul > li {
display:block;
}
If you was to use CSS parent selectors then try;
ul.same-class li {
display: inline-block;
}
li > ul.same-class li {
display: block;
}
The > in the second rule will select all ul.same-class li elements where it has a li as a parent.
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
I'd like to make use of unordered list for many reasons like using drag n drop jquery plugins and other effects like that.
The issue i'm facing is that <li> behave oddly when putting stuff in it.. What a robust CSS to make <li> tags behave like <div> tags but still keep the vertical ordering style?
Here's one simple way:
ul, li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
use this
li{
display:block;
}
gl
The problem is very simple:
<div id="main-content">
<ul>
<li>
<div class="post-row">
<div class="post-footer">
This is the Footer
<div class="footer-buttons">
<ul>
<li>Edit</li>
<li>Reply</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
And now main content:
#main-content ul {
margin:0;
padding:0;
}
#main-content ul li {
display:block;
list-style:none;
}
And last, footer-buttons:
.footer-buttons {
float:right;
}
.footer-buttons ul {
margin:0;
padding:0;
}
.footer-buttons ul li {
display: inline;
}
The problem is that the list in .footer-buttons is displayed as block. And in fact when I checked DOM the display: inline is overrided by the #main-content.
From what I know understrand this shouldn't happen. Or am I wrong and id elements will always override child classes?
You have 2 selectors: #main-content ul li and .footer-buttons ul li . First of them uses id and the second uses class, that's why the first one is used as more descriptive. Use:
#main-content .footer-buttons ul li { display: inline; }
I think IDs do take priority over classes however this post may have more info
CSS class priorities
you could always add !important on the .footer-buttons ul and ul li declarations or add the id in front of th3e .footer-buttons class
e.g.
#main-content .footer-buttons ul
Yes, selectors with IDs will always override selectors with just classes. This is due to "specificity"; you can get a good overview here.
Solutions here would include adding #main-content to your footer selectors, or declaring the style as display: inline !important;.
Maybe I misunderstand your question, but if you want the actual list to be inline, this should work:
.footer-buttons ul {
margin:0;
padding:0;
display: inline;
}
What your code does is make the list elements be displayed as inline.
This is correct behaviour because an id is considered more specific than a class, and so to use them in a similar scenario will always give the id rule priority.
The best way to fix this is by defining more specific rules. This doesn't have to mean targeting everything by class though, you can build your rules from the specific ids, like is TommyB's answer. !important should however be avoided: What are the implications of using "!important" in CSS?
Keep in mind that IDs have higher priority than classes, and inline style is higher than IDs. The best fix would be to refactor your css, removing display:block; from #main-content. Or even better: make main-content a class. Avoid using !important, it's not a good practice.