I have an element, page-header that I want to remove the margins from. That element also has a child h1 that I also want to remove the margin from. Is there a shortcut syntax in LESS that allows me to do this.
Right now I have this:
.page-header,
.page-header h1{
margin:0;
}
But I'm curious if there's something like:
.page-header &+ h1{
margin:0;
}
that, when rendered, will give me CSS like my first code block above. &+ doesn't work, I checked
The ampersand can only be used with nesting:
.page-header {
&, & h1{
margin:0;
}
}
For more information, see my blog post.
Related
When I want to apply same attr to different class/tag I make it like this:
#wrapper .content input[type=radio], .content input[type=checkbox]{
border:none;
}
Or:
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
Or:
#wrapper .content .block1, .block2{
background:#FFF;
}
Is this usage wrong? Would you recommend a site or (e)book or like this for true usage of css?
By using
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
You are actually saying : The element with ID wrapper, having the class content and an input type of the type radio apply the following : (border:none) , for every input on the page having input type checkbox apply (border:none) .
Everything after the comma is af it starts from zero, taking no previous mentioned clauses in account.
But as Andy said, without an example of the HTML al we can do is explain how it is interpreted. (Look at the difference between block2 and .block2 .
Block2 says there is an element <block2> and .block2 says there is an element (e.g.) <fieldset class="block2"> </fieldset>
When I want to apply same attr to different class/tag I make it like this:
To answer that, if you only want to specify a class , there is no need to explicitly mention an ID. You could just as well do
.content input[type=radio],input[type=checkbox]{
border:none;
}
There is no error in this, but in that case it will apply it to all elements with that class. So imagine you have 2 fieldsets, and one class .content , then to both the same css values will be applied.
So if you want to specify which fieldset, you should use the ID of the encapsulating element, followed by the class.
Without knowing the HTML all but the last one could be correct.
You need to call to an id or class for your block2, so it should be:
#wrapper .content .block1, .block2 {
background:#FFF;
}
But assuming .block2 is in the same .content div then you could also be more specific and do:
#wrapper .content .block1, #wrapper .content .block2 {
background:#FFF;
}
i think
#wrapper .content input[type=radio],input[type=checkbox]{
border:none;
}
is best for you
You are actually saying : The element with ID wrapper, having the class content and an input type of the type radio apply the following : (border:none) , for every input on the page having input type checkbox apply (border:none) .
For this you want border none for all checkbox.
You can give same css attribute to different class/tag by separating them with commas.
Ex.
.abc, .kbc, .xyz{
font-weight:bold;
}
Is it possible with CSS and the latest Chrome or Firefox to automatically remove the top margin from the first <h1> tag, or do I have still have to use jQuery?
You just need h1:first-child { margin-top: 0px; } DEMO
There's no :first-of-page selector so no, you can't use CSS for sure. No way in CSS to extract all h1 from a page whatever their parents and preceding siblings and only take the first one.
You need to know a little bit more about your h1 elements.
Examples:
you can select the first h1 if it's also the (first and or only) child of body > header (or #header in HTML 4.01)
if all h1 are siblings, then h1:first-of-type is the first one for sure
if the first h1 is right after your main nav in a section, then body > nav + section > h1 would select it. Or maybe body > header > nav + section > h1:first-of-type
div#content h1:first-child { margin-top:0; }
AFAIK This won't work in IE6 and may be buggy in IE7.
Pseudo selectors.
h1:first-child {
margin-top: 0;
}
Note that those aren't supported in Failbrowsers (IE 7 and previous), so you may still need a jQuery backup solution.
Add a class to the h1 tag, like:
<h1 class="first">Your text</h1>
Then in the css:
.first
{
margin-top: 0;
}
I have 2 div elements #container1 , #container2. Can i use styling in below manner ?
#container1,#container2 h5{
}
If yes then i cudn't get it to work for #container3
#container1,#container2,#container3 h5{
}
rule somehow doesn't seem to apply for #container3 ..
What could be the reason ?
That selector will apply to #container1,#container2, and any h5s in #container3. I think you want:
#container1 h5,
#container2 h5,
#container3 h5 {
/* styling */
}
This is exactly what classes are intended for, however. If you add class="container" to each of your container divs, you can simply use the following rule:
.container h5 {
/* styling */
}
The h5 at the end means that particular rule only applies to h5 elements inside the id.
As an exmaple, from your first example...
#container1,#container2 h5{
}
The above rules would apply to an element with id=contrainer1 and also to an h5 element inside an element with id=container2.
With:
#container1,#container2,#container3 h5{
}
You are actually targetting id=container1, id=container2 and also the h5 element inside an element with id=container3
In both cases though, the element with the h5 tag does not target the element itself, only the heading tag inside it.
your code seems to correct but you can use another solution...
why you doesnt use calss for every div you want?
.divcontainer{
css....
}
I asked a question a few minutes ago and tried all of the suggestions. I still am having an issue getting this just right. I have found the block of css that is causing the issues and need a solution.
I have 2 files. The first file has all of the css that I used when I made the form. When I had the form looking the way I liked it, I put all of that relevant code into a different stylesheet. The new stylesheet is overriding some of my values and causing things to look bad.
This is what I want and is all I require.
#password #header td {
padding-top:90px;
vertical-align:top;
}
This however is the block of code that is making things break. I don't want any of this. Is there a way to override it? The line-height specifically is really making things look horrible. If I remove the line height attribute then other parts of my site break.
td, th {
color:#000000;
font-family:verdana,geneva,sans-serif;
font-size:12px;
line-height:17px;
margin:0;
padding:0;
}
You can override all the attributes in your general css declarations into your specific style and add !important to ensure it is followed, e.g. for line height you can use:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height: normal !important;
}
Try changing line-height to something a little smaller. Something like this (targeting specific problem elements):
#password #header td {
line-height:10px;
}
You can also specify normal to line-height:
#password #header td {
line-height:normal;
}
You can directly override it in the specific style, like this:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height:12px; /*Or whatever is relevant*/
}
Check out Firebug's CSS browser and calculator to see what is the "default" value.
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3