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.
Related
I had to Create a working HTML/CSS for the following nestes list
root
child1
child11
child2
child21
child22
child3
child31
So for this I created the following
HTML
<ul class="list-view">
<li>
<ul><li>Chlid11</li></ul>
</li>
<li>
<ul>
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li>
<ul>
<li>Chlid31</li>
</ul>
</li>
</ul>
Now How will I be able to apply CSS to the leaf parent and root node .
I have to make Leaf to green , parent to red and root should be like parent but with underline
Here Leaf are
Child: 11 , 21, 22 , 31
Parent: the three li
root will be :the first ul
This was a question asked to me in an Interview I am just trying to solve it
Css has to be dynamic . I mean I was not suppose to add classes directly saying what is leaf and what is root .
Something like this
Jsfiddle
UPDATE
CSS
.list-view> li:first-child{
color:red;
text-decoration: underline;
}
.list-view> li ul li {
color:red;
}
.list-view> li ul li ul li{
color:green;
}
I am not able to make just the root node underline
Thanks
I am going to take a stab in the dark, so please don't shoot me if i jumped the gun. But here is my understanding of what he is talking about.
<ul class="root">
<li class="parent">
<ul class="leaf">
<li>Chlid11</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid31</li>
</ul>
</li>
</ul>
CodePen for example
first of all, your markup does not make very much sense to me. Nesting ul's inside li's is not very useful when the li's do not contain any other content. I suppose your markup should look more like this:
<ul>
<li>
<span>Root</span>
<ul>
<li>Parent</li>
<li>Parent
<ul>
<li>Leaf</li>
<li>Leaf</li>
</ul>
</li>
</ul>
</li>
<li>Root</li>
</ul>
When it comes to targeting each level with css, you have a number of options. Adding classes to each level may seem the most straight forward, but it can be harder to maintain, and it is easier to make mistakes. Others have already demonstrated this technique, so I'll limit myself to a few alternatives:
option 1a:
ul { /* root + parent + leaf */ }
ul ul { /* parent + leaf */ }
ul ul ul { /* leaf */ }
option 1b:
li { /* root + parent + leaf */ }
li li { /* parent + leaf */ }
li li li { /* leaf */ }
option 2:
ul > li { /* root + parent + leaf */ }
ul > li > ul > li { /* parent + leaf */ }
ul > li > ul > li > ul > li { /* leaf */ }
That is basically it I guess, though you could come up with some variations. Option 1a and 1b are equivalent. Option 2 is more specific, and can be useful when trying to overwrite certain styles. It is considered good practice to keep your selectors as little specific as possible though. This way you can overwrite them easier later on, and your selectors do not get ridiculously long. It just keeps your code easier to read and maintain, so I would definitely go for option 1 in this case.
Note that this technique requires you to overwrite your styles. The styling you requested could ie. be achieved by doing something like this:
li {
color:red;
}
li span {
text-decoration: underline;
}
li li li {
color:green;
}
The pseudo classes you speak of in the comments (:nth-child, ...) are irrelevant here. They are meant for distinguishing between siblings, not for parent-child relations.
edit:
the text-decoration property is a bit tricky to overwrite. Have a look at the specs on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.
To solve this, you have to make sure the element with the underline is not the parent of the rest of your tree. Th easiest way is to put it in a span and apply the underline only to that:
http://jsfiddle.net/r616k0ks/3/
(I have updated my code samples above accordingly)
Using some specific selectors you can create almost any selection without using classes on the child elements.
I don't know if this is what you're getting at:
/* Root */
.list-view { background: grey; }
/* First level li's */
.list-view > li { background: red; }
/* First level of ul's */
.list-view > li > ul { background: orange; }
/* Second level of li's */
.list-view > li > ul > li { background: purple; }
/* Second level of li's, first element */
.list-view ul > li:nth-child(1) { background: green; }
/* Second level of li's, all other elements */
.list-view ul > li:nth-child(1n+2) { background: blue; }
See link https://jsfiddle.net/6d3g3zLm/
If not, feel free to elaborate on your question.
Have you tried adding classes to your html?
https://jsfiddle.net/w7tx52L5/
HTML
<ul>
Root
<li class="parent">
Parent1
<ul class="child"><li>Chlid11</li></ul>
</li>
<li class="parent">
Parent2
<ul class="child">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
Parent3
<ul class="child">
<li>Chlid31</li>
</ul>
</li>
</ul>
CSS
.root {
color: red;
text-decoration: underline;
}
.parent {
text-decoration: none;
color: red;
}
.child {
color: green;
}
Edit
from your comment it appears you need to use :nth-child selectors. That wasn't clear from your original question. try this css -
ul {
color: red;
display: inline-block;
width: 100%;
text-decoration: underline;
}
ul li {
display: inline-block;
width: 100%;
text-decoration: none;
color: red;
}
ul li:nth-child(odd) > ul li:first-child {
color:green;
}
ul li:nth-child(even) > ul li {
color: green;
}
The workaround of display: inline-block and width:100% is because text-decoration affects all nested elements as well. http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Add classes to the list elements as Geoffrey has shown in his answer. Then apply styling to the classes as you would any styling. If you don't know CSS or anything about how to style, I would suggest researching a little more before you ask these kinds of questions, as this stuff is relatively easy to learn if you put some time and effort into it. http://www.w3schools.com/css/
I have that site code inside body
HTML:
<ul id="navlist">
<li class="first">
Home
</li>
<li>
Store
</li>
</ul>
and this style CSS:
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
I try to understand what means and syntax is of:
ul#navlist li:first-child a
componentClass#class componentClass:class(???) componentClass
What is first-child? Is there a second childmodificator? Are those css blocks are considered by logical alternative?
First-child is first child of parent element - http://www.quirksmode.org/css/selectors/firstchild.html
In this case, li:first-child is the same as li.first.
For second child, you can use li:nth-child(2) (unsupported in IE <= 8), li.first + li or :first-child + li (in this case where we speak about lis) - siblings or first element. In this case you can use simplier li + li (all lis except the first one). Etc.
Look what options you have when you want to fire Xth element - http://www.quirksmode.org/css/selectors/#t50 (+ you can use siblings selector to fire next element (+), or all next siblings selector (~)), etc.
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; }
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}
I'm trying to figure out if I'm totally mis-understanding something here.
I have a menu and submenu (dropdown style using only CSS, no javascript) and for some reason the sub-menu styles (defined by .submenu li a) always shows up at the same style as the parent a (defined by #menu li a) even though the submenu CSS styles show up AFTER the top menu styles.
Am I mis-understanding CSS rules? I thought features defined LATER and at a lower level override the top level (for example, inline style will always override style.css styles). I'm attaching a screenshot off Firebug that shows crossing out the font sizes defined on line 275 in favour of styles defined at line 225, on the parent DOM objects.
My DOM looks like this to simplify it:
<ul id="menu">
<li>
about us
<ul class="submenu">
<li>
Testimonials
</li>
</ul>
</li>
<li>
listings
</li>
<li>
MLS® Search
</li>
<li>
City Guide
<ul class="submenu">
<li>
The West End
</li>
<li>
Coal Harbour
</li>
</ul>
</li>
<li>
blog
</li>
</ul>
And my CSS looks like this.
#menu li a:link, #menu li a:visited {
color:#333;
text-decoration:none;
font-size:16px;
font-weight: bold;
padding-bottom: 3px;
text-transform: uppercase;
}
#menu li a:hover {
color:#333;
background-image: url('../images/pink_dots.png');
background-position: bottom left;
background-repeat: repeat-x;
}
#menu li a:active {
position:relative;
color:#333;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color: #DD2D77;
padding:0px 0px 0px 0px;
margin: 0px;
top:16px;
z-index: 20;
}
#menu li:hover .submenu {
left: -5px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 2px 0px 3px 0px !important;
position:relative;
display: block;
width: auto;
float: none;
text-align: left;
}
.submenu li:hover {
}
.submenu li a:link, .submenu li a:visited {
color:#fff;
text-align: left;
font-size:12px;
font-weight: normal;
margin: 0px;
white-space:nowrap;
display: block;
padding:3px 7px 5px 7px !important;
min-width: auto;
zoom: normal;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
background-image: none !important;
background-color: #73AA12;
}
The id selector has more specificity than your other selector.
Increase the specificity, which is favoured over !important.
Yes; you are misunderstanding how CSS works.
http://www.htmldog.com/guides/cssadvanced/specificity/
The order in which you define rules in the CSS file means nothing. The selector determines which rules apply and when.
The axiom behind CSS is - the more specific your selectors are, the more precedence they take over less specific ones.
This is how anchor styles work for instance. To show an underline only on hover:
a:hover
{
text-decoration: underline;
}
a
{
text-decoration: none;
}
Even though the less specific rule is defined later, the more specific rule (an anchor tag that is also mouse hovered) overrules the more general rule.
You're correct in saying that rules declared later in the cascade take precedence but only if they are at an equal or higher specificity.
Your first style #main li a uses an ID as the context whereas the second style .submenu li a uses a CLASS as the context. An ID holds more specificity than the CLASS, so it overrides the .submenu.
You need to read up a bit on CSS Specificity:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
http://css-tricks.com/specifics-on-css-specificity/
You could do a quick fix and declare #main > li a - which will only apply to anchors inside list items that are direct descendants of the #main element. Then, your .submenu li a rule will be applied to your submenu items.
Here is a specificity calculator that you can add as a bookmark in your browser: http://www.westciv.com/mri/
When you click it, it will open a window that you can either type a selector into, or you can click an element on the page and it will suggest the selector that you should use (showing you the path it took to get there).
It may help as a learning tool.