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....
}
Related
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.
I often have this problem and am not sure of the most elegant solution. I don't want to use !important although that would work.
I have articles on my site which are contained in a div with the class article. The corresponding CSS controls the H4 tag like this.
.articles h4 {
font-size: 16px;
}
However within my articles I have a div element with the class notice which also has a number of H4 tags, but when I use this CSS below, the declaration from the articles class is applied instead.
.notice h4 {
font-size: 24px;
}
What I want is a solution that means I don't have to apply classes to the actual H4 tags in notice — I want to be able to point to H4 tags by their container element.
Assuming your mark up is something like this:
<div class="articles">
<h4> Article Title </h4>
<div class="notice">
<h4> Notice Title </h4>
</div>
</div>
As long as
.notice h4 {
font-size: 24px;
}
is below .articles in your css file it should work. However, another fix would be to use
.articles .notice h4 {
font-size: 24px;
}
You should try to target the class more specific. Try to use
.articles .notice h4 {
font-size: 24px;
}
You need to use the child selector. If your .article class is just a wrapper and the h4 element is a direct child of it, this is an easy fix. The child selector is widely supported.
.article > h4 { font-size: 16px; }
The child selector will not apply any of its styles to an element that is not an immediate ancestor. So if you have another h4 element in another wrapper, it will not have the styles of the one outside the wrapper.
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 want to know a simple thing:
when setting up a style that is inherited by all its children, is it recommended to be most specific?
Structure: html > body > parent_content > wrapper > p
I want to apply a style to p but respecting these:
I don't care having parent_content or wrapper having the style
I do care changing the html or body style (or all p)
So what should I use?
#parent_content{
color:#555;
}
#parent_content p{
color:#555;
}
#wrapper{
color:#555;
}
#wrapper p{
color:#555;
}
/*...etc...*/
Also, some links to tutorials about this would be great
In the matter of specificity, give an id to the p and use
#paragraphid {}
But the answer depends what actually are your need. I will break down your code
#parent_content{
color:#555;
}
Will apply the color the text inside and may be inside its children also
#parent_content p{
color:#555;
}
Will apply the color to all the p inside #parent_content and its children
#wrapper{
color:#555;
}
Will apply the color to all the text inside it, and of its children
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