I have the following html
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<span class="author">AUTHOR: Ayuidasht</span>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
I can do this with jQuery, but how can I do this with css?
$('.title').next('.content').css('margin-top','20px');
I just need a margin-top on the content if it comes after a title. i know I can do this with css but i forgot how and I cant figure out what it is called.
You are looking for the adjacent sibling combinator, +.
Example Here
.title + .content {
margin-top:20px;
}
h2 + p{
margin-top: 20px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
Related
Basically I want to style a p tag when it is not present inside another div.
For example
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
</div>
</div>
I tried the following but no luck
.container > :not(.secondClass) + p {
color: red;
}
Tou can change the style like this :
div > :not(.secondClass) > p {
color: red;
}
There are several ways you can do this, depending on context. See code below:
.container .row > p {
background: red;
}
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
<p>I want to style here</p>
</div>
</div>
,
Suppose I have a header inside <div> with a certain class and I don't want a certain effect to apply to them, how do I exclude them with CSS?
Below the code:
h2:not(.article) {
font-size: 25px;
}
<div class="article">
<h2>Title<h2>
</div>
But it still doesn't work and the <h2> inside .article div is still getting affected.
The <h2> isn't closed properly. The :not() pseudo class is backwards. Below is an example of how to use it.
.article {
font-size: 25px;
}
:not(.article)>h2 {
font-size: 12px;
}
<div class="article">
<h2>Title 1</h2>
</div>
<div>
<h2>Title 2</h2>
</div>
here is my HTML code:
<div id="main">
<h1>
<div class="details-of-family-members">Details of Family Members</div>
</h1>
<div class="wrap data">
<h1> Hello</h1>
</div>
</div>
Here is my CSS to hide .wrap.data div based on div of class .details-of-family-members which is inside h1.
In CSS3 there isn't a option to select the parent based on the child.
We got this sittuation: h1 is sibling of .wrap.data, not details-of-family-members.
Therefore, you should add the class details-of-family-members to h1 tag. And then you can:
.details-of-family-members + .wrap.data {
display:none;
}
.details-of-family-members + .wrap.data{
display:none;
}
<div id="main">
<h1 class="details-of-family-members">
<div>Details of Family Members</div>
</h1>
<div class="wrap data">
<h1> Hello</h1>
</div>
</div>
Try this and you cannot target parent node based on child by css
#main h1:hover + .wrap.data {display:none;}
I want to show the text "You save ..." in a new line. I do not how to do. Please guide me. Please click for more details jsfiddle code
<div class="product-wrap first">
<div class="item">
<div class="product-image">Img area
</div>
<div class="product-content">
<div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>
</div>
<div class="price-box">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>
</div>
<div class="clr"></div>
</div>
</div>
</div>
Make use of <br/> tag here! It breaks the line
DEMO
UPDATE
Add below properties to your .product-wrap .item .price-box class css
DEMO
.product-wrap .item .price-box {
margin-top: 6px;
overflow: hidden;
width:auto; //Set this
float:left; //and keep it float left
}
span.div-discount {
/* display: block; */
clear: left;
display: block;
}
just add this to your css it will work
here is the demo please look out
DEMO
Add Css
.div-discount b, .div-discount em{display:block;}
Your paragraphs are set to float, which is fine, but you will need to clear and wrap it in a div and set that div to block so it extends the fill width.
Then you want to set the div-discount class to block too.
CSS:
.amounts {
display: block;
}
.div-discount {
color: #b50016;
display: block;
}
.clr-both {
clear: both;
}
HTML:
<div class="amounts">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p>
<div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>
See jsFiddle
The b element in HTML stands for bold. Add the rule in CSS defines is display as inline. It means the elements which possess inline or inline-block properties will be shown on same line. So If we want to show our custom text on a new line, we have to change its style from display inline to display as block.
.div-discount b{ display:block;}
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>