I have this piece of code, that it refuses to work without the !important (which I never want to use, because I know there is always a way to do without it).
The interesting thing is that the CSS line is after everything else (and as far as I know, this should overwrite the other stuff)
live demo jsFiddle
HTML Structure:
<div id="body">
<div class="box">
<p>...</p>
</div>
<p>...</p>
</div>
CSS:
#body{
padding:18px 35px;
}
#body p{
margin-bottom:18px;
}
.box{
background:#ddd;
border:1px solid #000;
padding:5px;
}
.box p{
margin:0;/*works with !important*/
}
It's because the ID of #body p is a more specific selector than the class of .box p. The important simply overrides that cascade.
Matching p with #body has higher specificity than matching p with .box. Read the specificity section of the CSS spec for help. Try
#header .box p { margin: 0; }
The space between #header and .box is important.
Your #body p has a greater specificity value. You can read more on generally how specificity values are calculated here.
Related
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
On this site https://www.nycofficesuites.com/new/, I want to change the color of the top bar on the homepage only. I have tried this code:
.home .page .page-id-94 .page-template .page-template-template-home .page-template-template-home-php .wood .top-bar {
background:blue;
}
as well as this code:
.page-id-94 .top-bar {
background:blue;
}
Neither work. Thanks for your help.
I checked your website, and there're a huge hoard of classnames on one body element.
Problem: There're spaces in all your selectors.
.class1 .class2 selects an element with a classname of class2 that's the child of an element with the classname class1.
.class1.class2 has no spaces in the selector, so it selects one element with both classnames of .class1 and .class2.
Correction:
.home.page.page-id-94.page-template.page-template-template-home.page-template-template-home-php.wood .top-bar {
background:blue;
}
OR:
.page-id-94 .top-bar {
background:blue;
}
There's a space before the last selector because .top-bar is a child of the body element.
Hope that helps!
Give this a try:
.home header.style-4 .top-bar {
background: #YOURCOLOUR;
}
If it's a single page you could just set the style with !important
<div style="background:red!important;">
<p>Example</p>
</div>
I guess the answer to this may be simple, but I can't figure it out on my own.
I've got the following HTML:
<div id="excerpt">
<p class="chapter">Chapter One</p>
<p>Text</p>
<div class="copyright-notice">
<p>Copyright © 2014 Name. All rights reserved.</p>
</div>
<!--end copyright-notice-->
</div>
<!--end excerpt-->
and the following CSS to go with it:
#excerpt {
padding:20px;
color:#000000;
}
#excerpt p {
line-height:1.4em;
text-indent:45px;
text-align:justify;
}
p.chapter {
text-align:center;
text-indent:0;
font-size:16pt;
text-transform:uppercase;
}
.copyright-notice {
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
margin:20px auto;
padding:20px;
}
.copyright-notice p {
display: block;
color:#666666;
text-align: center;
text-indent:0;
}
JS Fiddle reproduction.
As you can see I try to center the text and set the indent to 0 for the paragraph with the chapter class as well as the text within the copyright notice. But it doesn't work.
If I apply the style to the paragraph directly in the HTML file like:
<p style="text-align:center;text-indent:0;">text</p>
JS Fiddle reproduction.
It'll work. But as soon as I try to style those paragraphs through CSS text-align and text-indent get ignored.
Any idea what I'm doing wrong? Thanks for your help!
This is just a specificity issue.
The selector #excerpt p is more specific than p.chapter. Therefore text-indent:0 isn't applied. The reason it was applied when using the style attribute, is because inline CSS is more specific.
More specifically, (pun intended), #excerpt p has a specificity calculation of 101. Whereas p.chapter has a specificity of 11. (An id is 100 points, a class is 10, and an element is 1).
As for a solution, use either of the following to avoid the specifity conflict.
p {
text-indent:45px;
}
p.chapter {
text-indent:0;
}
or..
#excerpt p {
text-indent:45px;
}
#excerpt p.chapter {
text-indent:0;
}
(Other styling omitted from brevity.)
The latter example is probably what you should go with because you don't want all paragraph elements to be indented, just those that are a descendant of #excerpt. I'd avoid using id's in CSS as much as possible though - save those for JS.
I have my HTML structure as follows:
<div id="id1">
<h1>my name </h1><h3>myemailid#xyz.com</h3>
</div>
The code automatically brings the <h3> on the next line. However, I want it next to <h1> without any line-change.
CSS:
#id1{
width: 900px;
padding: 30px;
background: #FFF;
text-align:center;
}
#id1 h3{
font-family:Arial;
white-space:nowrap
}
How can I modify to achieve my desired result?
You could use more semantic markup or simply modify the elements with CSS:
#id1 h1, #id1 h3 { display: inline; }
HTML headings behaviours with display: block by default. So they won't share same line with any other relative element.
Set their display to inline-block, and they will render one after the other, just as you expect.
I have the following markup and CSS:
<div id="contactarea">
<p class="heading">Anuncios Premium</p>
<p class="tag">Asegure que su venta se complete!</p>
</div>
#contactarea
{
min-height:150px;
border:1px solid cyan;
}
#contactarea p .heading
{
Color:Yellow;
background-color:Green;
}
#contactarea p .tag
{
min-height:150px;
border:1px solid cyan;
}
The contactarea alone is working, the cyan border displays, but the font color of the p doesn't work.
Thanks!
Too many spaces:
#contactarea p.heading
The way you've got it, it means "any element with class 'heading' that is a descendant of a <p> element that is a descendant of the element with id 'contactarea'". Thus it didn't affect the <p> tags themselves.
The SelectORacle site is a great friend!
Get rid of the extra spaces. #contactarea p .heading should be #contactarea p.heading.
This isn't an answer to your direct question but it may be helpful to you in the future. First, if you find that one rule is superceding another, pay attention to the natural priority of CSS rules within a stylesheet and for the prioritization of inline css > external css. Second, if you ever want a rule to take priority, you can do:
#contactarea p.heading { color:yellow !important; }