I am trying to figure out how to target only the first that resides within a on one of my pages...
Maybe I am doing something wrong, looking for help.
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
In my CSS, I have the following code:
#mem-tools a{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
however, I only want the first to be styled this way, and not the second within the .members class
From what I understand psuedo classes do not work for IE, so I an not use :nth selector.
Can I define the first only, to use the above noted style?
Am I over complicating this?
The :first-child would work, but if you don't want to use pseudos can also create a class to style the element... might be eaiser:
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
Then you can style the class accordingly:
#mem-tools a.first-link{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
That way you can avoid pseudos.
#mem-tools a:first-child might do the trick
.mem-tools +a {
/*
try your Styles here
*/
}
Related
We have a left nav that I am trying to tweak just a tad. Please don't critique the validity of the HTML, we have a CMS and external developers that are driving the ship and, frankly it works for now.
What I want to do is apply a style to <DIV>s that are after the <DIV class="nav_selected">, I just want indent them with some padding-left:30px;
Thats it, but everything I have tried applies to the "nav_selected" div as well which is what I dont want. It is kind of a header, and the divs under that are children.
<div class="left_nav_2">
<div class="left_nav_2_container">
<ul class="no_bottom_border">
<div class="nav_selected"><li><h2>Link 1 Selected</h2></li></div>
<div><li>Link 2</li></div>
<div><li>Link 3</li></div>
</ul>
</div>
</div>
You can try creating a class for the first line, then use a negation pseudo class to utilize it.
:not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}
Something like this could work too:
CSS
.no_bottom_border li{
padding-left: 30px;
}
.no_bottom_border .nav_selected li{
padding-left: 0px;
// or just the opposite values of the .no_bottom_border li
}
Is it something like that?
ok you can use this:
ul.no_bottom_border > div:not(:first-child) {
padding-left: 30px;
}
hope it helps
Here it is which you want
Add padding-left to both the divs like
.no_bottom_border li{
padding-left: 30px;
}
.nav_selected li{
padding-left: 0px;
}
It is working when i apply it as inline style.
<div id="footer">#Copyright 2012</div>
#footer
{
background-color:Black;
color:Silver;
width:100%;
text-align:center;
position:absolute;
bottom:0;
}
Look with Firebug which style is winning over your.
Please note that the order of declaration of your CSSs in your page matters, last win.
So you probably have another #footer rule in another stylesheet loaded after your.
There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!
Fisrt method:
Create a class for almost each & every css rule and use them anywhere.
<div class="f_left d_iblock">
<span class="w_100 f_left">blah blah</span>
</div>
.f_left{
float:left;
}
.f_right{
float:right;
}
.d_block{
display:block;
}
.w_100{
width:100%;
}
....
....
Second method:
Create css rules for each element.
<div id="container">
<span>blah blah</span>
</div>
#container{
float:left;
display:inline-block;
}
#container span{
width:100%;
float:left;
font-weight:bold;
}
In general I am using the first method. I am choosing this method because this provides the following to me.
Small css files hence provide less load time.
Reusable css rules.
Clear code hence CSS management is more easier than second method.
I don't need to create an id or class attribute but only assign css rules. So I don't need to think of a name for each element :)
I think browsers can interpret css rules fast so this enhances the performance.
I see most sites generally don't use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.
Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences :)
The main reason not to do it the first way is that it doesn't separate presentation from content: your HTML elements will look like <span class="f_left d_block w_100">, with the presentation embedded into the HTML itself. The whole point of CSS is to remove the presentation from the HTML so you can write <span class="product-list-description"> in HTML and then define the style in CSS.
The first method allows perhaps fewer CSS rules which can be re-used on lots of different elements, but it forces you to change your HTML whenever you want to change presentation. For example, if you have lots of elements with the same CSS rules applied, if you want to change how they look you'll have to change the HTML for every one of those elements. This is a lot of work and is prone to errors. With the second method, you'd have a CSS rule that applies to all those elements, and to change their presentation you only have to change the rule. In most projects this is a significant advantage.
Your both method is not so good yet. you can write second method like this:
#container{
float:left;
}
#container span{
display:block;
font-weight:bold;
}
But your approach for creating a separate class for every property is not good.
There are some good article you have to read about check these
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en/Writing_Efficient_CSS
UPDATED
Why your approach is not good suppose i have three different element there most of the property is same but are different.
For Example:
.one{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:18px;
color:#000;
line-height:1.5;
}
.three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:13px;
color:#000;
line-height:1.5;
}
You can write this in a better way which decrease your CSS file size. Write like this:
.one, .two, .three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
font-size:18px;
}
.three{
font-size:13px;
}
So, if i go through your approach i have to define each property separately, it's time consuming & heavy also.
In the below example link 2 comes out white and not black as expected how can I style the color of link two without wrapping it in a container tag?
.text a{
color:#FFF;
}
.black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Your second selector needs to be more specific than the first one to override it:
.text a {
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
It comes out white because the previous selector has higher specificity. One solution in this:
.black{
color:#000 !important;
}
This can cause complex problems if you use it too much, however. Generally the best solution is to try and avoid too many selectors. Have one selector that sets a default style for links, then only use classes to change specific links. For example:
a {
color: #fff;
}
.black {
color: #000;
}
It turns out white because the first selector is much more specific, namely: get a link in an element that has a class "text", whereas the last is merely get any element with the class "black".
You can solve this in two ways:
.text a.black {
color:#000;
}
OR
.black{
color:#000 !important;
}
In which 'important' overwrites other rules that are give to elements with the class "black".
here is working solution you just apply the style to black with id rather than class:
.text a{
color:#FFF;
}
#black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
As others have mentioned, it comes out white because your previous selector for "a" tags is more specific than your "black" class.
There are two options here:
Be more specific:
.text a{
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Or, you could us the "!important" rule:
.text a{
color:#FFF;
}
.black{
color:#000!important;
}
<div class="text">
Link 1
Link 2
</div>
I would strongly advise the first approach, but in some situations, "!important" can be a quick fix until you figure out where the real problem lies. Don't abuse the "!important" rule because it'll mess you up for the future - trust me on that!
Hope this answers your question. Have a good day.
Michael.
in my navigation bar i have this code.
<div id="aboutnav"><a class="hl" href="#"><h2>about\a</h2></a></div>
all the div does in the case is put the text in position and in the a.hl it's -
a.hl{
background-color:#000;
text-decoraction:none;
color:#fff;
}
the text is the right colour, it is in the correct position but there is no background colour.
This is because in HTML4/XHTML you can't nest hx elements into a! Try using this instead:
<div id="aboutnav"><h2><a class="hl" href="#">about\a</a></h2></div>
I think you would need to update your css in a similar way:
a.hl{
display:block;
background-color:#000;
text-decoraction:none;
color:#fff;
}
Your style is probably being overridden by another style for h2. Try:
a.h1 h2{
background-color: #000;
}
You should write the HTML like this
<div id="aboutnav">
<h2>
<a class="hl" href="#">about</a>
</h2>
</div>
And then style it like so
#aboutnav h2 {
background-color:#000;
}
#aboutnav h2 a {
text-decoration:none;
color:#fff;
}
Example: http://jsfiddle.net/jasongennaro/rbxBL/
Fyi... you had text-decoration misspelled.
Also, you really don't need the class for the a when the HTML is done this way.