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!
Related
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 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>
Is it possible to address the first element in a div when you don't know what the first element is.
I have for example two different divs
<div class="templateOne">
<h1>Header 1</h1>
</div>
<div class="templateOne">
<h2>Header 2</h2>
</div>
That I can then say
.templateOne > * {
margin-top: 0em;
}
or something like that.
If you want to use adress the first child element, you can use the :first-child or the :nth-child(1) pseudo-selector.
.templateOne :first-child {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
If you want to address only the first element with a specific class name you can use :first-of-type or nth-of-type(1):
.templateOne:first-of-type {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
> child combinator
* universal selector
:first-child
.templateOne > *:first-child {
margin-top: 0em;
}
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>
I have a HTML that is messed and i can not change it, it looks like this:
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
Now i would like to make every odd p that comes after a h2 element bolder.
So i would like this to be in bold:
This is a message
Two cat
Dog 0
Dog 2
How to write a selector in CSS (no jQuery, no JS available) to make those texts bold?
You can do this by using the css ~ selector, followed by the nth-of-type (alternatively nth-child) selector. You can read more about it these selectors on the MDN: General Sibling Selector and :nth-of-type.
And here's how to achieve what you wanted. Essentially, you're selecting all odd <p> elements that are siblings (i.e that come after) an <h2> tag.
h2 ~ p:nth-of-type(odd) {
font-weight: 600;
}
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
h2 ~ p:nth-of-type(2n+1){
font-weight: 600;
}