hi can anyone help me with my css assignment? - html

i have this code that i have to work on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced CSS - Assignment 1</title>
<style>
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>
How can i change the first 2 links (google links) color green and the third one red without changing the code? i have to use the selectors and pseudo classes. Can anyone tell me how to to that?


You can use :nth-of-type().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced CSS - Assignment 1</title>
<style>
a:nth-of-type(1),
a:nth-of-type(2) {
color: red;
}
a:nth-of-type(3) {
color: green;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>
Codepen: https://codepen.io/manaskhandelwal1/pen/Yzpprjw


a:nth-child(any number here)
a:nth-child(1), a:nth-child(2){
color: green;
}
a:nth-child(3){
color: red;
}
Google
Google Doodles
Goto Link Group


You can use attribute selectors:
/* This will match both google links because they both start with "https://www.google.com/" */
a[href^="https://www.google.com/"]{
color: green;
}
/* This will exactly match "https://www.link-group.eu/" */
a[href="https://www.link-group.eu/"] {
color: red;
}
<h1>Main Heading</h1>
<p>Paragraph 1</p>
Google
Google Doodles
Goto Link Group
<div id="first-div">
<h2>Subheading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="second-div">
<h3>Sub subheading</h3>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

Related

How do I use multiple selectors in the same HTML file?

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>

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 all div elements with class="one"
div.one,p ,to Selects all div elements with class="one" and all p elements
div.one p ,to Selects all p elements ,inside div elements with class="one"
div.one>p ,to Selects all p elements where parent is div elements with class="one"
div.one + p ,to Selects p elements that is placed immediately after div elements with class="one"
div.one ~ p ,to Selects all p elements that is placed after div elements with class="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!

How can i selected all nested paragraphs?

i have the following HTML
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>
so if i want to style all paragraphs inside i will do
.parentt p:nth-of-type {
border:1px solid red;
}
but if i have nested paragraphs for example
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>
then my css code does not work.How can i style the nested paragraphs - nested p 1 and nested p 2 automatically throught the parent like in the first case ?

You can use Descendant selectors to select a nested child.
.parentt * p, .parentt > p{
color: red;
}
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>
Official Specification: 5.5 Descendant selectors
OR
You can directly apply properties to all <p> inside .parentt div.
.parentt p{
color:red;
}
<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>

I can't select my second paragraph inside my parent class

I have the following html
<div class="parentt">
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>
so if i want to style the second p inside my parentt class i will do
.parentt > p:nth-child(2) {
border: 1px solid red;
}
but when my html is mixed
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
and i put inside h2 tag, my css is not working any more because now nth-child 2 is not paragraph but it is h2.
How can i dynamically first select all p inside and after that to select the second p inside?
Because sometimes the second p inside the parrent can appear on nth-child number 8 for example.
I can't change every time my css.

In such cases you could use nth-of-type instead of nth-child
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>

Use nth-of-type
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

You can use :nth-of-type() pseudo selector. You can read more here
.parentt p:nth-of-type(2) {
border:1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>

I have this code, how can I get only all the p under each h3 and put them to 3 lists

I have this code, how can I get only all the p under each h3 and put them to 3 lists, using Html Dom?
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<h3>text</h3>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
What I mean is all the p below first h3 (above second h3) put into one list, the p below second h3 (above third h3) put into one list, the p below third h3 put into one list

You mean this?
const texts = [...document.querySelectorAll("p")].reduce((acc, p) => {
let tag = p.previousElementSibling;
let currentHeader = tag.tagName === "H3" ? tag.textContent : Object.keys(acc).pop();
acc[currentHeader] = acc[currentHeader] || [];
acc[currentHeader].push(p.textContent);
return acc;
}, {})
document.body.innerHTML += Object.keys(texts).map(header => `${header}:<ul>${texts[header].map(text=> `<li>${text}</li>`).join("")}</ul>`).join("")
<h3>Header 1</h3>
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
<h3>Header 2</h3>
<p>text 4</p>
<p>text 5</p>
<p>text 6</p>
<h3>Header 3</h3>
<p>text 7</p>
<p>text 8</p>
<p>text 9</p>

Add padding to last Child if only 2 are present

In a WooCommerce shop sometimes I do have 3 <p> and sometimes I do have 2 <p> (depends on the product)
How to I archive to add a padding to the last <p> but only if there are 2 <p> are shown. No padding should be added when all 3 <p> are shown.
<div class="astra-shop-thumbnail-wrap">
<img width="186" height="186" src="#">
<div class="label-group">
<div class="categories-link">
Accessoires
Schale
</div>
</div>
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>
</div>

How [..] to add a padding to the last <p> but only if there are 2 <p>
A combined selector which includes both:
:last-of-type
:nth-of-type(2)
will select only those elements which are both second and last in the current series.
e.g.
p:nth-of-type(2):last-of-type
Working Example:
div {
float: left;
width: 120px;
margin-right: 12px;
border: 1px solid rgb(255, 0, 0);
}
p {
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
text-align: center;
}
p:nth-of-type(2):last-of-type {
padding: 12px;
}
<div>
<p>Paragraph 1</p>
</div>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>

You can make use of + selector
body {
margin: 0
}
.wc-gzd-additional-info {
width: 100%;
background: red;
margin-top: 0;
margin-bottom: 5px;
box-sizing: border-box
}
.tax-info+.shipping-costs-info+.delivery-time-info {
padding: 0
}
.shipping-costs-info+.delivery-time-info,
.tax-info+.delivery-time-info {
padding: 50px
}
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>
<hr />
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>
<hr />
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>