Say this is my setup:
<ul id="filters">
<li>Any distance</li>
<li>10 km</li>
<li>30 km</li>
<li>50 km</li>
</ul>
In my css how can I style my list depending on what UL it is in? I tried this:
#filters ul li {
padding: 10px;
}
But I didn't have any luck, the same with several different variations on this. I know it's a basic question but I'm still learning.
Your selector is incorrect for what you are trying to achieve:
#filters ul li {
padding: 10px;
}
#filters ul li will select li elements that are descendants of a ul that is a descendant of an element with id="filters".
You want:
#filters li {
padding: 10px;
}
You simply want:
#filters li {
padding: 10px;
}
The reason it doesn't work at the moment is because it's saying the ul INSIDE an element with the ID #filters. (e.g. <div id="filters"><ul>...)
Another correct way of styling your list would be ul#filters li. This says that you want a ul element with the ID "filters". This is unnecessary though, since you can only have one element with the ID "filters".
Your selector is wrong.
Below are some alternative selectors that will work just fine:
ul#filters li {
padding: 10px;
}
The above selector will apply to the LI elements of any UL element that has the ID 'filter'. This selector has the highest specificity (in the given context). Here's a good article on specificity http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
#filters li {
padding: 10px;
}
The above selector will apply to the LI elements of an element that has the ID 'filter'.
#filters * {
padding: 10px;
}
The above selector will apply to ANY element of an element that has an ID 'filter'. I don't advise you to use this, but you could because a UL element has to be followed by LI elements according to the W3C.
The #filters is the ul itself, you must select the children like this:
ul#filters li {
padding: 10px;
}
However, because ID is unique, you can ommit the ul:
#filters li {
padding: 10px;
}
Try this instead:
#filters li {
padding: 10px;
}
It would need to be
ul#filters li{some code}
You put the id or class after the name of the element.
or simply
#filters li{your code}
Related
I have just started learning css. I have assumed that a class is a way of grouping styling information.
I'm trying to understand CSS pagination. In the example, it is written
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li { display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
pagination is a class. what does it mean when they write ul.pagination li and
ul.pagination li a?
ul.pagination li a has a float left; style. what will this achieve?
When you have the following code block in your HTML document:
<ul class="pagination">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
and you would like the style this list, list items, and the links separately.
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
The CSS block above will affect your list (<ul></ul>).
ul.pagination li {
display: inline;
}
This one will affect each list item (<li></li>) in your list.
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
and the last one will affect each link (<a></a>) inside of your list items.
float: left is used to have a horizontal list (for example menu). You can learn more from this link: http://www.w3schools.com/cssref/pr_class_float.asp
Lastly, I also suggest you to read the CSS Selectors in order to understand the logic: http://www.w3schools.com/cssref/css_selectors.asp
I recommend you read an authoritative source on CSS selectors: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Note that the term "selector" refers to both a rule's selector (everything before the {) but also to individual components of the selector, so h1.foo p.bar is a selector, as is just h1.foo and p.bar, for example).
In response to your questions directly:
what does it mean when they write ul.pagination li and ul.pagination li a?
When a space character appears between two selectors (e.g. between ul.pagination and li it means "descendant", so any <li> element which appears underneath an <ul class="pagination"> will be matched, no matter how deep it is (as opposed to the > selector, as in ul.pagination > li, which only selects <li> elements that are immediate children of <ul class="pagination">.
CSS rules match and apply to only the deepest element in the rule, so ul li will only apply style rules to the <li>, but ul li a will only apply style rules to <a> elements.
ul.pagination li a has a float left; style. what will this achieve?
It means that every <a> element that is a descendent of a <li> which in-turn is a descendent of a <ul class="pagination"> will have the property float: left applied to it.
I have this code to select my first, second and third li tag, but i was asking myself if it was possible to write this code shorter. I usually don't use the child() selector so I don't know much about it.
ul > :first-child{
margin-right: 50px;
}
ul > :first-child + li{
margin-right: 50px;
}
ul > :first-child + li + li{
margin-right: 50px;
}
Chain two :nth-child() pseudoclasses to match a range of adjacent elements:
li:nth-child(n+2):nth-child(-n+3) {
margin-right: 50px;
}
this will select both the second and the third li
acting like the logical and operator.
Codepen Demo
Visual result of the effect of these psuedoclasses chained:
For second child you can use
li:nth-child(2){}
and for third child use
li:nth-child(3){}
CSS has a :nth-child selector just for that. You can do something like this :
ul > li:nth-child(3){ ... }
Read more about this at here
All the answers are correct. Summed up, your code would look like:
ul > li:first-child {
margin-right: 50px;
}
ul > li:nth-child(2) {
margin-right: 50px;
}
ul > li:nth-child(3) {
margin-right: 50px;
}
I am a developer and I don't know CSS properly. Here I am stuck with a simple problem. I am using Sitefinity CMS for development. I one of the page I used ul and li. CSS given by designer for li is as below
.listing li {
list-style: circle url(/images/default-source/main_library/bullet.gif?Status=Temp&sfvrsn=2);
margin-bottom: 7px;
}
I just copied his HTML into my page but I observed li bullets are not at the same position as designer gave. I used Developers Tools and inspected. My CMS adding its own style to li as below
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
When I disable padding: 0; then it appears to be at desired position. But how can I disable padding: 0; from development environment. Means any CSS that can remove padding: 0; effect?
You need to apply padding-left: 20px; to the ul.
Add this to your css:
.listing { padding-left: 20px; }.
Edit: looks like you already have styles defined for .listing, so just append that to the .listing block, I believe it's line 730 in common.css.
The more accurate the selector, the more precedence it has.
ul li { padding:5px; }
#my-Div div.another-div ul li { padding:0px; }
In this example, the more specific li element will use the 0px padding instead of the 5px. You can also add !important after an attribute if you need to ultimately override and existing style on an element.
ul li { padding:0 !important; }
I have one CSS file which I found it in one website, but I have a confusion about it. The code is:
ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}
So, what I am styling here? as I know, it should be (( a )) tag, so if I add
display:inline-block;
to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.
Maybe I will have one more question later, but for timing i want to understand the code and correct my information.
Best regards and thanks in advance,
Gharib
edit:
I want to use both inline-block and block, and here is my full code:
ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}
and the html is something like:
<ul class="ablock">
<li><div align="center">Find</div></li>
</ul>
<ul class="aninline">
<li><div align="center">Back</div></li>
<li><div align="center">Next</div></li>
</ul>
The above selector will target all a elements which are nested under li which is further nested under ul, that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like
ul.class_name li a {
/* Styles goes here */
}
The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name
As you commented, it seems like you want to target a ul element, now instead of using something like
ul {
/* Styles goes here */
}
Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like
ul.class_name {
/* Styles goes here */
}
Or you can also use a nested selector like
div.wrapper_div ul {
/* Styles goes here */
}
Here, in the above selector we are selecting all the ul which are nested under .wrapper_div.
Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul, make sure you use > selector which will select direct child, as users tend to nest a ul element under li, say for example dropdown menu, this is common, so it is better to use a selector like
div.class_name > ul { /* Selects first level ul elements */
/* Styles goes here */
}
ul > li > ul { /* Selects nested level ul elements */
/* Styles goes here */
}
You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a. Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul>.
If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:
ul { display: inline-block; }
My HTML file is:
asdfasdf
<ul>
<li id="differentstyle">Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
and my CSS style is:
#differentstyle ul li {
padding-bottom: 50px;
}
but this style is not modifying the "car" (the first one). Am I doing anything wrong? Is this suppose to work?
It does not style anything, because #differentstyle ul li selects a <li/> inside a <ul/> inside #differentstyle, but there is no <ul/> inside your #differentstyle. Use
ul li {
padding-bottom: 50px;
}
instead if you want to style all <li/> elements. Or use
#differentstyle {
padding-bottom: 50px;
}
if you just want to style the first <li/>. Or, if it's really just the first you want to style differently and you just want the styles to apply to a specific list, change your html to
<ul id="yourClass">
<li>Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
And use this css:
#yourClass > li {
padding-bottom: 50px;
}
#yourClass > li:first-child {
padding-bottom: 100px; /* different style for the first item */
}
#differentstyle ul li : means, the li inside the ul inside #differentstyle, and there's no li inside a ul inside #differentstyle.
So simply use:
#differentstyle {
padding-bottom: 50px;
}
Fore More Info: CSS selectors
Your selector #differentstyle ul li { means "match a li which is a descendant of a ul which is a descendant of an element with the id 'differentstyle'". If you want to target that first li, simply use #differentstyle { ... }
I think you have a height problem . and some code issues for use margin-bottom: 50px; instead of padding-bottom
so remove your all code .Just try to add below code
<ul>
<li id="differentstyle">Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
CSS:
ul
{
height:160px;//Its not a important
}
ul li
{
margin-bottom: 50px;
}
Please see this output design