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
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.
Even though I have set text-decoration to none, an underline is still showing on the h1 element. If you want to see the full css, go here. I am new to css, and this is just an adapted version of some code I found on the internet, sorry if the problem is obvious. If the problem isn't with the bellow code (which is where I think it probably is) then I will add in other relevant code.
You can see the page this is working on here
#pagetop h1 , a:visited
{
display:block;
float:left;
line-height:90px;
color:#FFFFFF;
text-align:left;
font-size:27px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:23px;
text-decoration:none;
}
There is text decoration in your link in the h1 tag.
Add this style:
h1 a
{
text-decoration:none;
}
Your CSS selector #pagetop h1 , a:visited states that you would like to apply those styles to an h1 and also an a in its visited state.
The comma in your code represents a list of separate selectors rather than a combined selector. In your case you don't need to separately specify the same styles for both the h1 and the a.
What you want to select is an a that is a descendant of an h1 within #pagetop (so that it isn't applied to all h1s):
#pagetop h1 a { text-decoration: none; }
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 am having a tag where i have added a Css for it as
#jsn-maincontent_inner h3 {
background-color:#BBB1A5;
color:white;
padding:3px 8px;
text-transform:uppercase;
}
but the background color extends for the whole row of the line and it is not limiting upto the content .
HOw to resolve this??
I thought I'd chip in to tell you why this is happening as the information may be useful in the future.
The "h3" element is a block element. This means it will generally take up an entire "row" as you describe it.
The reason a "span" element (for example) behaves differently is because it is an "inline" element, which means it will take up "just enough" space.
There are two solutions already up to help, you could also set
display: inline;
On the h3 element, but this will change other behaviour too.
The easiest thing to do is to put the text inside a span and put the background color on the span:
#jsn-maincontent_inner h3 {
padding:3px 8px;
text-transform:uppercase;
}
#jsn-maincontent_inner h3 span {
background-color:#BBB1A5;
color:white;
}
<h3><span>Text here</span></h3>
This will put the background color just around the text. If you want to actually shrink the h3 element, you can either set a width for it (though text will wrap if it is longer than the width), or make it an inline element (though there are other downfalls to this approach).
Try setting a width for that:
#jsn-maincontent_inner h3 {
background-color:#BBB1A5;
color:white;
padding:3px 8px;
text-transform:uppercase;
width:500px;
}
You may also want to set the width for #jsn-maincontent_inner if it doesn't have already:
#jsn-maincontent_inner
{
width:600px;
}
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