Issue
One of our homework assignments for the week is putting various selectors into the same file. The textbook we we're given was no help at all and I can't figure out what's going wrong here. The first and fourth work but the two in the middle don't. I screwed something up as it was working when we did it in class, I just don't know what.
CSS file (everything in here is random just to have it filled in. It wasn't important for the assignment)
div.one > p{
background-color: rgb(154, 212, 212);
border: 2em;
border-style: dashed;
font-size: 10px;
text-align: center;
}
div.two + p{
background-color: rgb(18, 111, 114);
border: 10px;
border-style: dotted;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: larger;
}
div.three ~ p{
background-color: hsl(59%, 80%, 22%);
font-size: 15px;
border: 6px;
border-style: solid;
}
div.four{
border-style: groove;
border-color: chartreuse;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 400;
background-color: rgb(188, 164, 211);
text-align: center;
}
HTML file
<body>
<div class="one">
<h4>Section One</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
<div class="two">
<div>
<h4>Section 2</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</div>
<div class="three">
<div>
<h4>Section 3</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</div>
<div class="four">
<h4>Section 4</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>
</body>
Solution
Everything is right! You understood wrongly!
The table:
| Selector | Example | Description |
|---|---|---|
element |
p |
Selects all <p> elements |
element.class |
p.intro |
Selects all <p> elements with class="intro" |
element,element |
div, p |
Selects all <div> elements and all <p> elements |
element element |
div p |
Selects all <p> elements inside <div> elements |
element>element |
div > p |
Selects all <p> elements where the parent is a <div> element |
element+element |
div + p |
Selects the first <p> element that is placed immediately after <div> elements |
element1~element2 |
p ~ ul |
Selects every <ul> element that is preceded by a <p> element |
Reference
According to the table you can use
div.one,to Selects alldivelements withclass="one"div.one,p,to Selects alldivelements withclass="one"and allpelementsdiv.one p,to Selects allpelements ,insidedivelements withclass="one"div.one>p,to Selects allpelements where parent isdivelements withclass="one"div.one + p,to Selectspelements that is placed immediately afterdivelements withclass="one"div.one ~ p,to Selects allpelements that is placed afterdivelements withclass="one"
the last two points here make the second and third not working
div.one>p/*Edit here and test*/
{
background-color: rgb(154, 212, 212);
border: 2em;
border-style: dashed;
font-size: 10px;
text-align: center;
}<div class="one">
<h4>Section One</h4>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph 3</p>
<p>Paragraph Four</p>
<p>Paragraph number 5</p>
<p>Paragraph 6</p>
</div>Note: i have removed all other div for easy use!,just edit the one code in css
bookmark this for future!
Answered By - Neptotech -vishnu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.