I have a page with a default CSS file. In this page I have:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<br>
<ul>
<li>B1</li>
<li>B2</li>
</ul>
<br>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
<br>
I can view the default CSS but I cannot amend
ul {
paddind-left:15px;
}
what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.
I have used (cssreset-min.css) but all the css was eliminated. Any help?
Give the parent ul a new class:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<ul class="newClass">
<li>B1</li>
<li>B2</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
Then do:
ul.newClass {
paddind-left:0px;
}
This will work in all browsers. If you're not concerned about that, use #Andy answer.
if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult
If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work
The nth-child selector targets specific children, in this case the 3rd and 4th
Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)
#container ul:nth-child(2) li { padding-left: 0; }
You can try something like this :
http://jsfiddle.net/4X62Y/
Here's another solution without changing the HTML:
ul:not(:nth-child(3)) {
padding-left:15px;
}
Example
This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by #Alex Thomas .
Related
I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
lets say i have the following markup:
<ul class="editor">
<li>
Modules
View
Add
</li>
<li>
Sections
View
Add
</li>
</ul>
how do i float 'view' and 'add' to the right so that the right so that they appear in the same order as the html?
right now if i do
.editor li a:nth-child(2), .editor li a:nth-child(3){
float:right;
}
i will get a row that looks like:
Modules Add View
but i want
Modules View Add
Is this possible just via CSS3?
edit:
sorry i should have mentioned, i dont have access to the html. only css
Text-align the li right and float only the 1st a left.
.editor li {
text-align: right;
}
.editor li a:nth-child(1) {
float: left;
}
I assume that you've already hidden the default list bullets.
Just change the order.
<ul class="editor">
<li>
Modules
Add
View
</li>
<li>
Sections
Add
View
</li>
</ul>
Try the CSS3 flexible box model with explicit distribution and the box-ordinal-group property (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) - and if you can't make it work with floats, maybe it offers some alternative of attaining the same effect. Other than that, of course you can change the DOM order or simulate the layout by other means, but that's not advisable if you want to preserv your structure.
reorganize your DOM so that Add is before View and float them to right.