Add padding to last Child if only 2 are present - html

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>

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!

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>

How to make the images not overlapping each other?

I want to place the flip cards onto the images so that when I hover over the flip card, the card will be flipped but the image will not be flipped. I am able to insert the flip cards on the images, but the images seem to be overlapping each other? Is there any ways to get rid of the overlapping of images? And also I would like to make the flip cards position at the center of the images.
.pic {height: 500px;
width: 400px;
opacity: 0.5;
float: left;}
.flipCard {background-color: transparent;
width: 300px;
height: 350px;
border: 3px solid black;
border-style: double;
perspective: 1000px;
float: left;}
.flipCardInner {position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;}
.flipCard:hover .flipCardInner {transform: rotateY(180deg);}
.flipCardFront, .flipCardBack {position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
.flipCardFront {background-color: pink;
color: rgba(255, 255, 255, 0.884);
font: 25px Imprint MT Shadow;
text-shadow: 2px 2px 4px black;}
.flipCardFront h1 {padding-top: 20px;}
.flipCardBack {background-color: rgba(30, 165, 255, 0.774);
color: white;
font: 18px Book Antiqua;
line-height: 1.5;
text-shadow: 1px 1px 3px black;
transform: rotateY(180deg);}
.flipCardBack p.headline {padding-top: 20px;}
<div class="flipCard">
<div>
<img src="april.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> April's <br> Pinky </h1>
</div>
<div class="flipCardBack">
<p class="headline"> It's not April's Fool, <br> but it's April's Pinky! </p>
<p> Just need to wear PINK costume <br> to enjoy special discount <br> in Fine Dinner course! </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="wine.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> Be a <br> Sommelier </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Do you love wine? </p>
<p> It's the opportunity for you <br> to taste our wine for FREE <br> when you spend above RM 800. </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="hightea.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> Savoury <br> Treats </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Are you a <br> high tea craver? </p>
<p> You just need to pay for ONE <br> when two persons come for our <br> High Tea course. </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="giveaway.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> SNS <br> Giveaway </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Everyone loves giveaways! <br> Who doesn't? </p>
<p> Visit our social media pages now <br> to participate in the <br> giveaway contest! </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="hightea2.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> TGIF <br> Promo </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Thanks God, <br> It's Friday! </p>
<p> Every Friday evening, <br> we will be featuring a <br> 20% discount on all items. </p>
</div>
</div>
</div>

how to merge the row of the table using css?

ok so i have do the a table . The problem i facing is i want to know how to merge the row of my table ... anyone can help me or teach me on how to merge the row of my table ?? for example if my row1 and row2 below want to merge as one row, how do i merge it ? would be happy if someone can help me :) [ ps : can i merge the table by writing something in the style there ?? if can then how ??
below is my code :]
<html>
<head>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<body>
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
</body>
</html>

use rowspan attribute on the <td> tag. for example. use <td rowspan="2">this row is two rows merged</td> you could find more resource about this in https://www.w3schools.com/TAGs/att_td_rowspan.asp

Multiple fixed size div's auto line break

My Goal is to have a DIV that contains other fixed sized DIVs. Those DIVs should contain a line break (only) if necessary. So it should look like the following:
No line breaks necessary:
_______________________________
| ____ ____ ____ |
| |__| |__| |__| |
| |
| |
|_____________________________|
Line break necessary:
_______________________________
| ____ ____ ____ ____ |
| |__| |__| |__| |__| |
| ____ |
| |__| ... |
|_____________________________|
Currently, the best I could come up is the following:
<div id="outer">
<div>
<p>Some text</p>
</div>
...
</div>
<style>
#outer {
overflow: auto;
}
#outer div {
display: inline;
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
Display: inline-block;
}
</style>
Does anybody have an idea on how to achieve this?

Hope this will help you and resolve your query, let me know any issues
#thomas
#outer {
overflow: auto;
border:1px solid #ff0000;
padding:10px;
}
#outer div {
display: inline-block;
border: 1px solid black;
margin:0px 1% 2% 1%;
}
#outer div p {
width: 60px;
height: 60px;
margin:0px;
display: inline-block;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
...
</div>

Try like this: Demo
#outer div {
display: inline-block; / Use inline-block */
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
}

here your code is working fine i have tried to change the display inline-block to the div to make the block in a row
#outer {
overflow: auto;
}
#outer div {
display: inline-block;
padding: 5px;
border: 1px solid #808080;
text-align: center;
line-height: 32px;
margin: 15px;
}
#outer div p {
width: 60px;
height: 60px;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
</div>
and here is the demo working code for this
Demo code