I have used :nth-child for a list element - li:nthchild(2) in a class- "one". There is another list element on the page belonging to another class(class="two)" and the css of the class "one" applies to the list element of the class "two".
Here is the CSS of first list element"
.one li:nth-child(2){
position: absolute;
width: 80% !important;
background-color: orange;
color: #FFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
And this is for the class two:
.two li:nth-child(2) {
float: left;
margin: 0 5px 5px 0 !important;
display: block;
list-style: none;
border: none;
background: none;
}
I don't want the class "two" to inherit the css of class one. Could any one tell me how to make the .one li:nthchild(2) css applies only to that class and not affect others?
Thanks!
It seems like ul.two is inside a child li of ul.one.
To correct the issue, modify your CSS like:
.one > li:nth-child(2) {
...
}
That should do it.
Related
I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}
You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.
You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.
I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.
So here's the code I'm using to style my breadcrumbs.
.breadcrumbs-one{
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
margin-top:15px;
margin-left:-20px;
}
.breadcrumbs-one li{
float: left;
}
.breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #fff;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
.breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a:hover{
background: #fff;
}
.breadcrumbs-one a::after,
.breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
.breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
}
.breadcrumbs-one a::before{
border-left-color: #ccc;
z-index: 1;
}
.breadcrumbs-one a:hover::after{
border-left-color: #fff;
}
.breadcrumbs-one .current,
.breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}
.breadcrumbs-one .current::after,
.breadcrumbs-one .current::before{
content: normal;
}
I got it from here: http://www.red-team-design.com/css3-breadcrumbs
How do I modify the code so the CSS triangle isn't appended to the last breadcrumb?
So if there is one breadcrumb I wouldn't append a triangle at the end of it.
Similarly, if there are two breadcrumbs, I don't want a triangle at the end of the second breadcrumb.
And so on and so forth.
You could select the last li element with the last-child selector. After that you delete the content of the pseudo classes after and before.
#breadcrumbs-one li:last-child a::before,
#breadcrumbs-one li:last-child a::after
{
content: normal;
}
In this example you have selected the second link and you can see that the last link has no arrow after it.
If you want select a specific index element, for example the third li element. You can use the selector nth-child(index nummer). So for example, if you want to select the third li element you could do li:nth-child(3).
In this case :
#breadcrumbs-one li:nth-child(3) a::after,
#breadcrumbs-one li:nth-child(3) a::before
{
content: normal;
}
Fiddle update
Update
Now when you use the last-child selector and you have one element, that element will be seen as the last element. But you actually want that element not the have the idicator of last. So you have to use an other idicator for this. First, one element is the first and the last. You've already defined last-child so you could easially define the first-child element.
#breadcrumbs-one li:first-child a::after,
#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
You want this code to have more priority then the last-child. Now you could use the !improtant tag of css, however i strongly recommend you to not use this tag at all costs. One way to give more priority to a code is to make the selector more specific. In this case the #breadcrumbs-one is actually a ul element, so placing a ul before it makes it more specific:
ul#breadcrumbs-one li:first-child a::after,
ul#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
Now if you don't want to make a more specific selector, you can always place this code after the last-child selector code. Css will read from top to bottom order, so you want the overlapping code to be readed after the code to be overlapped. This order is only used when the selectors are identical.
However i choose the method of a more specific path, this way it doesn't matter where you place your code.
jsFiddle
Lets add another update
First of all i would suggest you to understand what happens. Here is a little example of how the arrows are created. With this the ::before and ::after pseudo classes are also used, Here some more info about that.
I would suggest you to first try it yourself before reading my answer.
Each 'crumb' is defined by the bar with text, arrow next to it and the border of the arrow.
So what psuedo class is generating what?
Well simply, the ::after pseudo class is generating the arrow it selfs and the ::before pseudo class generates the border of the arrow.
Now you only want the arrow color to be changed(you can change the border youself). Now if you have read the border-trick you may notice that this is created with only borders. This way you don't want to use background-color but change the border color.
You can change the border color with: border: 1px solid white;, however you only want to change the color. The way you do it now is also giving the width and border-style. With border-color you can change only the color. To be even more specific: border-left-color: white;.
So would have this:
#breadcrumbs-one .current::after
{
border-left-color: white;
}
Remeber what i said earlier? A more specific selector will overwrite other css code. In this case a class is more specific as a element(anchor).
Now you have only changed the arrow color. Let's change the background of the bar itself.
There is already a css code that defines the .current element :
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
}
Just change the background of the element, so:
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: white;
}
There you go, the .current element is white by default!
jsFiddle
Unless I've missed the point of the question, it isn't. Even on the page you cite, it shows the last item in the list has a different CSS class
<ul id="breadcrumbs-one">
<li>Lorem ipsum</li>
<li>Vivamus nisi eros</li>
<li>Nulla sed lorem risus</li>
<li>Nam iaculis commodo</li>
<li>Current crumb</li>
</ul>
So, just make sure your class="current" is on the last item in your list.
If this is dynamic, then it can be done with server sided code or probably some JavaScript
so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO
I am setting the style of list items like so:
ul.list li {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
ul.list li:hover {
background: #F7F7F7;
}
but I want to define a special list item for the title of the list only it inherits the previously defined style too. I know I could just give the above styling a class but that feels cumbersome. Do I have to manually "undo" everything just for the special list item or give the above styling a class? or is there a better way to do it? Maybe I shouldn't be using a list item for the title?
ul.list li.header {
font-size: 16px;
font-weight: bold;
}
If you're at liberty to use advanced CSS3 selectors, you can use the :not() selector:
ul.list li:not(.header) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
Otherwise, you'll just have to manually override them.
If the title of the list must be inside the list, I'd probably just (as you mentioned) "manually undo" them:
ul.list li.header {
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 0;
height: auto;
}
It's not so bad.
If you only need to support modern browsers, you could do this:
.list li:not(:first-child) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
.list li:first-child {
font-size: 16px;
font-weight: bold;
}
.list li:hover {
background: #F7F7F7;
}
This eliminates the need for any classes (though you could replace :first-child with .header if you do want to keep that class).
What is the basic difference between CSS ID and CSS Class?
Someone told me that, ID can be used only once in a page. But I found that it can be used multiple times.
like
body
{
background-color: #3399FF;
}
div#menuPane{
position: absolute;
left: 25px;
top: 25px;
width: 25%;
}
div.menu {
display: block;
font-size: 14px;
margin: 0;
padding: 0;
border: 2px solid #7FC07F;
}
div.menu a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
letter-spacing: 1px;
margin: 0px;
color: black;
border-top: 1px solid #487048;
}
div.menu a:link{
background: #33CCFF;
}
div.menu a:visited{
background: #33CCFF;
}
div.menu a:hover{
background: #3FC73F;
letter-spacing: 2px;
}
div.menu h4{
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 30%;
top: 25px;
width: auto;
border: 2px double #7FC07F;
background-color: #33CCFF;
padding: 2px;
margin-right: 5px;
}
div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
border-bottom: 1px solid black;
}
div#content a:link, a:visited{
background:#0099FF;
color: #A3F4A3;
letter-spacing: 1px;
}
div#content a:hover{
background: #FF0000;
color: #A3F4A3;
letter-spacing: 1px;
}
Think of ID like your Student ID. Only one exists in your school - yours. Think of class like a group of kids...all of whom belong to the same class: "Biology". If you want to address a specific student, you would do so by acknowledging his/her ID - since that will never address more than one student. If you wanted to address a group of students, you could do so by acknowledging their class - "The biology class will be enjoying pizza today" vs "Jonathan Sampson will be enjoying pizza today".
<students>
<student id="jonathan-sampson" class="biology" />
<student id="lizza-matthews" class="earth-science" />
<student id="michelle-andrews" class="biology" />
</students>
Takeaway:
ID = Student ID (Schools don't issue identical IDs to multiple students)
CLASS = Group of Students (Like 'The Biology Class' will be going on a fieldtrip)
It can only be assigned to one element in the page, but it can be used in multiple CSS rules. Class names can be assigned to multiple elements in the page.
See this answer for a description of the differences.
Generally speaking, you use id's for
styling something you know is only
going to appear once, for example,
things like high level layout divs
such sidebars, banner areas etc.
Classes are used where the style is
repeated, e.g. say you head a special
form of header for error messages, you
could create a style h1.error {} which
would only apply to
One final note -- some browsers will allow multiple identical "id" values, but you should definitely not do this as it is will break on standards-following browsers.
.class will affect elements matching value in "class" attribute.
style by id will affect elements matching value in "id" attribute.
it is recommended that you do not repeat ID value in elements, since that is suppose to be unique identifier of element on current page.