I’m a little confused on how to specify the first paragraph because it doesn’t lie within a div element so if I try to make it bold in CSS it will, in turn, affect all CSS p elements. Can someone please help? Thanks!
You can grab an element that is nestled in another element by using the > symbol such as
div > p
This excludes all the other stuff that is getting in the way and only selects p that are DIRECT children of div.
Thanks, but the first p that needs to be bold is not a child of div, it comes before it. Is there a way to bold that p without affecting any other p?
Never mind. I got it.
For anyone wondering what the introductory paragraph would be:
body > p {
font-weight: bold;
}
I hope this helps!
I tried your way and it worked for the introduction but not for the summary.
Can you please help me to fix what I did wrong?
Since the summary paragraph lies within the second div you want to specify this in CSS. By doing this you have to state div twice and p once because you are referring to p, the summary paragraph. It should look something like this:
div div p {
font-weight: bold;
}
Please tell me if this helps!
It said i didnt do it right and i wrote:
p{
font-family:Garamond
}
p1 div p1 {
font-weight: bold;
color:#7AC5CD;
}
ul{
color: #000000;
text-decoration:underline;
}
because my code says this:
Ultimate Text Challenge <p1>Introduction: Cascading with CSS</p>
<div>
<p1>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
If, however, you change that same property to a different value for a more specific instance of p,
that change will <em>override</em> the 'general rule'.
</p1>
<ul>
<li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
<li><p>BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
in Garamond, and 'p's INSIDE 'li's will be in Verdana.
</p></li>
<li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
</ul>
</div>
<p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
</body>
can you tell what is wrong
If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.
html
|
+ - - - - + - - - - +
| |
head body
| |
+ - - - + +- - - +- - - +
| | | | |
link title p div p
(intro) | (summary)
|
+ - - - + - - - - +
| |
p ul
(synopsis) |
|
+ - - - + - - - - +
| | |
li li li
| | |
p p p
The p-Tags are located:
html > body > p (2)
html > body > div > p (1)
html > body > div > ul > li > p (3)
p as selector we have selected all 6 p-Tag's
body > p as selector we selected 2 p-Tags ==> Intro & Summary
div > p as selector we have selected 1 p-Tag ==> Synopsis
div p as selector we have selected 4 p-Tag's
li > p as selector we have selected 3 p-Tags under the ul-Tag
Some reference-material:
As jQuery uses the same syntax for it’s selector’s
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
1 Like
The reason it is not working is because you put “p1 div p.” First off there is only one type of paragraph and that is “p,” only headings (ex: h1, h2, and h3) change with numbers placed next to them. Also, you specified all p(s) but you only specified one div. As stated above, it should be “div div” first because you are breaking the code down to the second div where the summary paragraph lies and then you put “p” to refer to the paragraph lying within the second.
It should look like:
div div p {
font-weight: bold;
color:#7AC5CD;
}
Are you having trouble with your unordered lists too?
on which lesson? the same one u helped me on?
Yes, I thought that was the one you were referring to. Are you talking about another lesson?
oh well i passed that
have you done lesson 17 on css selectors
Yes, I have. What are you confused on?
all of it almost
it keeps confusing me
It is asking you to only change certain paragraphs. You can do this by referring to “p:nth-child()” and in the parentheses you put the paragraph number it is asking you to change. Your CSS should look like it does below:
p:first-child {
font-family: cursive;
}
p:nth-child(2) {
font-family: Tahoma;
}
p:nth-child(3) {
color: #CC0000;
}
p:nth-child(4) {
background-color:#00FF00;
}
p:nth-child(5) {
font-size:22px;
}