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; }
Related
http://codepen.io/oscholz/pen/qNYPVL
I am trying to select only the Random unattached paragraph.
I've tried a number of things that I think should all work (see below or the
p:first-of-type {
color: red;
}
.a:not(.relevant) {
color: red;
}
.a:nth-child(1) {
color: red;
}
.a:first-child {
color: red;
}
<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
<p class="a">first</p>
<p class="a">second</p>
<p>third</p>
<p>fourth</p>
<p class="a">fifth</p>
<p class="a">sixth</p>
<p>seventh</p>
</div>
None of them do. What am I missing?
I know I could change the HTML, but I don't want to do that. :)
The correct answer is body > p
This is a test question in a Purewal's "Learning Web App Development":
https://books.google.com/books?id=JLDZAgAAQBAJ&pg=PA94&lpg=PA94&dq=%E2%80%9CSelect+only+the+random,+unattached+paragraph.%E2%80%9D&source=bl&ots=2h8FEOEPar&sig=tIdTEyLid_qpzEJPmYYTIIVxM50&hl=en&sa=X&ved=0ahUKEwiqnLG588_OAhWBrB4KHYUJByYQ6AEIIjAB#v=onepage&q=%E2%80%9CSelect%20only%20the%20random%2C%20unattached%20paragraph.%E2%80%9D&f=false
The book author points us to the answer in his next paragraph, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors
Purewal is illustrating the difference between CSS's descendant and child selectors, which is why, using the HTML defined for the question (see below), the simplest answer that illustrates the lesson is pedagogically correct.
<body>
<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
<p class="a">first</p>
<p class="a">second</p>
<p>third</p>
<p>fourth</p>
<p class="a">fifth</p>
<p class="a">sixth</p>
<p>seventh</p>
</div>
</body>
Excerpt From: Semmy Purewal. “Learning Web Application Development.”
There are many ways. You need to decide the semantic meaning of what you want to select and devise your selector based on that.
body > p.a would select all p.a elements that are direct children of the body tag (i.e., not nested inside any containers).
.important + p.a would select any p.a elements that come immediately after an .important element.
p.a:nth-of-type(1) would select the first paragraph tag if it has class a.
p.a would select all p.a elements, and you could then use .relevant p.a to override (or undo) any attributes on the ones you didn't want to affect.
Well-written semantic HTML should always describe the purpose of an element based on context, tag choice, and class and/or id attributes. If your document's markup is not semantic, there is only so much you can do to create a generalized CSS selector for the components you want to affect.
body > .a { color: red; }
This would select only the .a outside the .relevant container. You could also do something like this:
.a { color: red; }
.relevant .a { color: black; }
I would create the default rules in .relevant for all it's children. Then let the rules for .a handle those particular children. No hoops, nth or piping.
Your unattached <p>'s will end up with a different style than the ones with the .a class.
Try...
body > p{
color: red;
}
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;
}
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.
Quite simply I need to make the first letter in a <p> be a different color but there is an image before that letter some of the time. Is there a way to make :first-letter apply to a non HTML tag?
CSS:
p:first-letter {
color: red; // this should make the "W" red"
}
HTML:
<p><img src="will.jpg">West Philadelphia, Born And Raised</p>
It's not possible with CSS. You need to change the HTML as suggested or do some javascript hack:
find first-child img elements of paragraphs
move them to the end of the paragraph
apply style definitions on them to appear before the text
In first-letter :after:before pseudo classes don't work so i have made one trick for you i hope this will help you :-
p {
background:url(http://www.dummyimage.com/10x10/000/fff) no-repeat 0 3px;
text-indent:10px;
}
p:first-letter {
color: red;
}
demo:- http://jsbin.com/uwemuy/3/edit
"First" means first.
Change your HTML to:
<p>West Philadelphia, Born And Raised<img style="float:left;" src="will.jpg" /></p>
CSS:
.red_color {
color: red;
}
HTML:
<img src="will.jpg"><span class='red_color'>W</span>est Philadelphia, Born And Raised
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.