I building a common css user file for two different web pages. I have unordered lists on two different pages. In the actual html there are lots of unordered lists deeply nested in divs and what have your. The actual number of list items is greater than shown here. I need to format the first set of list items differently than the second set. There is nothing different in the ul coding. There is too much css to wade through for other differences.
<-- list in first page -->
<ul class="our-list">
<li class="group item" data-filter-id="draft">a little bit of <span>text</span></li>
<li class="group item" data-filter-id="contentstatus[published]">other <span>text</span></li>
<li class="group item" data-filter-id="participated">last of the <span>text</span></li>
</ul>
<-- list in second page -->
<ul class="our-list">
<li class="group item" data-filter-id="One">a little <span>text</span></li>
<li class="group item" data-filter-id="Two">the <span>text</span></li>
<li class="group item" data-filter-id="Three">last <span>text</span></li>
</ul>
The only discernible difference that I have noticed is different data-filter-id fields. I need to reference the span tags in the first list and not the second.
I've written this css to address the first li in the first list:
li[data-filter-id="draft"] span {
background-color: yellow !important;
}
Is there some way to refer to the sibling li tags in this css?
I could code:
li[data-filter-id="draft"] span,
li[data-filter-id="contentstatus\[published\]"] span,
li[data-filter-id="participated"] span, {
background-color: yellow !important;
}
But is there some shortcut I could code to have to list all the adjacent list items?
This this the correct way to escape the imbedded [] in css?
li[data-filter-id="contentstatus\[published\]"] span,
Is this the correct way to include the class on the css for the li tag?
li.group.item[data-filter-id="draft"] span,
Use ul:first-of-type > li as a selector for all li items inside the first ul
If that isn't sufficient (you write about different pages), use a class on the according ul and address the child lis of that class like ul.my-class > li
Related
I have this structure:
<div id="sidebar">
<ul>
<li>
"Main item"
<ul>
<li class="cat-item cat-item-21">
"Child item"
</li>
</ul>
</li>
It's generated and I cannot modify it. But, using CSS, I want to make the "Main Item" unclickable, using:
pointer-events:none
How can I acces the first "li" in the "ul" and modifiy his CSS without touch the rest ?
You need to use the > identifier to only specify to go one level deep per element you're looking at such as...
#sidebar > ul > li > a{ pointer-events:none }
This will select only the first a of the first li of the first ul inside #sidebar
I am using the latest version of Bootstrap for the styling of most of my HTML elements.
On one of my pages I need to dynamically add list items to my <ul></ul> element. I am adding these additional list items with jQuery. This is how I do it:
$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');
After a new list item is added to the ul element it seems to lose the styling just for that <li></li> item, the already added list items display correctly. The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding. Do I need to redraw the ul element after adding new list items to it so that it can be styled as part of the ul element?
It seems to work well for adding 1 list item element, but 2 or more you can see the difference.
This is my current HTML markup:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
</ul>
After adding the new list items via jQuery it looks like this:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
<li class="available">Test Item</li>
<li class="available">Test Item</li>
</ul>
When I view the markup by pressing F12 in Chrome it looks right, it's just not displaying right. My guess is it is not part of the already styled ul element.
Here is my style:
.test-items .available
{
border: 2px solid #999;
}
The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding
Padding is inside the element – and the newly added elements have that padding inside of their borders as well. That is not the issue.
The spacing between the elements, that comes only from the whitespace between the element’s tags – because the li are displayed inline.
If that’s what you are after here – then you simply have to add that whitespace between the newly added elements yourself:
.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');
https://jsfiddle.net/0s7n3907/4/
i am working on a site with this fieldset with ul. It is a joomla template where I am logged in as a publisher. This is the menu where you are able to change your articles.
What I would like to happen is that the first a and the last two a's are not visible. (like with a display:none). But I don't know how to call the lines in css. I know :nth-child() exists but It did not work the way I tried it.
<fieldset>
<ul class="nav nav-tabs">
::before
<li class>
Content
</li>
<li class="active">
Publishing
</li>
<li class>
Language
</li>
<li class>
Metadata
</li>
::after
</ul>
Is there anyone who knows how to call them in css? I am sorry if this question is not really expert level. Thanks
You can do it with simple CSS
.nav li:first-child,
.nav li:nth-child(3),
.nav li:nth-child(4) {
display: none;
}
But this is not a clean way. The edit form should be redesigned by an override. If you haven't the privilege to do that, ask the template developer.
Hide all and show the active one.
.nav-tabs li {display: none;}
.nav-tabs li.active {display: list-item} /* or block, if LIs are floated or you want them block */
Put the same class to the li's you want to hide and call them on your css.
Example:
<li class="hide-me"></li>
li.hide-me { display: none;}
BTW if you plan on changing the display value later on to show them separately id suggest you to use an id instead of a class.
Select just the First ul in class area by css
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
I tried this
'.area > ul' # This is not working as div is in between the .area and ul
Is there a different way to select the elements without referencing the in-between div in the selector?
So, Finally I should get just 3 ul without nested ul's
Update
In some other templates of my code the first ul comes after the second level
So to avoid confusion in selector, I am trying to avoid the inbetween divs.
Assuming you actually had valid HTML, you could use the * wildcard selector, which is as close as you're going to get to "[not] referencing the in-between div". That said, what's wrong with referring to the child <div>?:
.area > * > ul {
// Properties
}
Using > * matches any child tag, so it makes your CSS slightly more flexible, if that's your end goal.
For (potentially) two levels of elements, assuming they're <div>s, you can do the following:
.area > div > ul,
.area > div > div > ul, {
// Properties
}
'.area ul' would be the selector you are looking for if your html was correct.
edit:
Sorry, the html is kind of confusing... I thought those were </ul>s and that <ul>s were overlapping with <li>s.
This question my be relevant to your problem:
Similar to jQuery .closest() but traversing descendants?
I've started using Twitter Bootstrap, which is useful for me (as a programmer) to get a decent looking site without having to write much CSS.
However something is driving me crazy. I have a nested list like
<ul>
<li>Hello</li>
<li>World
<ul>
<li>Wide</li>
<li>Web</li>
</ul>
</li>
</ul>
But the first and second level of this list are NOT getting indented differently (ie. they align with each other on the left)
In normal html nested lists, deeper sublists indent more. But something in the style sheet must be turning this off. How do I find what controls this? I can't see a CSS "list indent" attribute for li elements in any documentation.
Just use Firebug in FF or Chrome dev-tools: right-click on your target and select inspect element. You can visually and textually inspect the CSS properties to see what's causing the collapse.
You probably want a rule like
ul > li {
margin-left: 10px;
}
Just to add to the answers above: padding-left will indent the words, but not the bullet point, while margin-left will indent the bullet point as well.
Example: http://jsfiddle.net/GMLxv/
I had the same problem as you.
There's a rule in type.less that cancels the indentation for lists:
ul, ol {
padding: 0;
margin: 0 0 #baseLineHeight / 2 25px;
}
I ended up overriding this rule:
ul, ol {
padding: 0px 25px;
}
Indentation in nested lists is now back.
You're looking to set padding-left:
li { padding-left: 1em; }
will indent every li 1em. Since the inner lis are already offset from the outer lis, it should do what you want.
Is it perhaps that you have set your bullets points to be inside the list items instead of before it, which would change your look quite significantly.
The CSS to apply it: ul { list-style-position: inside; }
Read more about list-style-position.
Example : https://jsfiddle.net/g0k0obwh/
You wouldn't want to apply the padding onto the li elements since that would create a padding between the bullet and the list if you are using a bulleted list. See:
ul > li {
padding-left:25px;
}
result:
- Hello
- World
- Wide
- Web
Neither would you want to apply it to the parent ul elements with ul { padding-left:25px;} which would give:
- Hello
- World
- Wide
- Web
The answer to your question is:
li > ul {
padding-left:25px;
}
result:
- Hello
- World
- Wide
- Web
Using Bootstrap you could do that by coding as follows. Just paste it your JSP or HTML and test it. You could go through this link for more information.
http://www.bootply.com/DglnYJTSKA
<div id="MainMenu">
<div class="list-group panel">
Item 3
<div class="collapse" id="demo3">
Subitem 1 <i class="fa fa-caret-down"></i>
<div class="collapse list-group-submenu" id="SubMenu1">
Subitem 1 a
Subitem 2 b
Subitem 3 c <i class="fa fa-caret-down"></i>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
Sub sub item 1
Sub sub item 2
</div>
Subitem 4 d
</div>
Subitem 2
Subitem 3
</div>
Item 4
<div class="collapse" id="demo4">
Subitem 1
Subitem 2
Subitem 3
</div>
Item 5
<div class="collapse" id="demo5">
Subitem 1
Subitem 2
Subitem 3
</div>
</div>
</div>
CSS:
.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-submenu {
margin-left:20px;
}