I'm trying to apply styles to the last <p> in a div. I'd like to do so without adding a new class (or ID).
I've tried using the last-child selector but it's not working.
I have even tried declaring p:last-child {font-style: italic;} for all of my CSS document and this doesn't seem to have any effect.
Here's my HTML:
<div class="new-section">
<div class="collection-container">
<div class="container">
<div class="row">
<div class="title span16">
<h1>The Title</h1>
</div>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
And here's my LESS CSS:
.collection-container {
height: 200px;
position: relative;
background-color: #gray;
.container {
padding-top: #r-margin;
.title {
margin-bottom: #xs-margin;
}
.span8 p:last-child {
font-style: italic;
}
}
}
It seems like this would be an appropriate place to use :last-of-type, to select the last p in its parent element:
.span8 p:last-of-type {
font-style: italic;
}
Demonstration
Here's a working example after I have removed the redundant code to show you how it works http://jsfiddle.net/RDpcM/1/
It's always a good idea to format your code and try to break out the bits that matter when trying to debug. It's very easy to get a closing bracket wrong and it all goes pear shaped.
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
div p:last-child {
font-style: italic;
border:solid 1px blue;
}
[EDIT - using JQuery]
If you have other elements in div.span8 and don't know the number of elements up front you can introduce some jquery to achieve the desired affect.
Here's another fiddle: http://jsfiddle.net/VPbv2/
or this will work as a standalone example for you to try out. JQuery dynamically sets the mySelected class when the document loads.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.mySelected {
font-style: italic;
border:solid 1px blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("div.span8 > p:last").addClass("mySelected");
});
</script>
</head>
<body>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div>xxx</div>
</div>
</body>
</html>
[EDIT - non JQuery]
You pointed out that the original answer will not work when you have this code
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div> another non-P tag that will mess up the p:last-child selector</div>
</div>
So you have to make sure you don't have any other siblings for your <p> tags by wrapping them in an extra div like this
<div class="span8">
<div class="only-for-p">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
<div> this non-P tag no longer messes with the p:last-child selector</div>
</div>
I think your syntax is wrong. Should be...
.span8 p:last-child {font-style: italic;}
You are missing the period..
Also if you aren't concerned about using CSS3 you could do...
.span8 p:nth-child(3) { }
This is useful for getting those middle elements.
In your case, you need to use either p:last or p:last-of-type selector, because last child of div.span8 is div.arrow-right and not p
div.span8 p:last-child { font-style:italic; }
your css is not working as p tag is not the last child of span8.
if you change
.span8 p:last-child {font-style: italic;}
to
.span8 p:nth-last-child(2) {font-style: italic;} it will work
Related
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>
Contained within a parent element (e.g., div, ul), I would like to set the color of a single paragraph, then have all subsequent paragraphs receive the same color -- until a new class of paragraph comes along to change the color. I tried to implement selectors to get the job done, but the mixed results only ended up confusing me. Suggestions would be appreciated. Thank you.
<html>
<head>
<style>
p.r { color: red; }
p.g { color: green; }
</style>
</head>
<body>
<p class="r">RED
<p class="g">GREEN
<p class="r">RED
<p>red
<p class="g">GREEN
<p>green
<p class="r">RED
<p>red
<p>red
<p class="g">GREEN
<p>green
<p>green
</body>
</html>
Set the style on the parent class ie.
HTML
<div class="parentdiv">
<p>this will appear blue</p>
<p>this will also appear blue</p>
<p class="green">this will appear green</p>
</div>
CSS
.parentdiv p {
color: blue;
}
.parentdiv .green {
color: green;
}
It's not a very scalable solution, but one option is to repeat the adjacent sibling combinator and p:not([class]) for as many consecutive <class> + <classless> elements there are in a row:
p.r,
p.r+p:not([class]),
p.r+p:not([class])+p:not([class])
{
color: red;
}
p.g,
p.g+p:not([class]),
p.g+p:not([class])+p:not([class])
{
color: green;
}
<p class="r">RED</p>
<p class="g">GREEN</p>
<p class="r">RED</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p class="r">RED</p>
<p>red</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p>green</p>
I need to apply CSS changes for the last <p> element of the 3rd <div class="span8"> without using jQuery.
HTML
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p class="last">Visit now</p>
<div>Something else</div>
</div><br/>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p class="last">Visit now</p>
<div>Something else</div>
</div><br/>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p class="last">Visit now</p>
<div>Something else</div>
</div><br/>
CSS
div.span8>p:nth-of-type(2n+1) {
font-style: bold;
}
OUTPUT
Some text.
This collection includes video, audio and essays.
Visit now
Something else
Some text.
This collection includes video, audio and essays.
Visit now
Something else
Some text.
This collection includes video, audio and essays.
Visit now (this one needs to be bold.)
Something else
You can do this by adding a class to the 3rd <div class="span8"> like this:
<div class="span8">
...
</div>
<div class="span8">
...
</div>
<div class="span8 boldClass">
...
</div>
and you CSS goes like this:
.boldClass > p:nth-child(3) {
border:2px solid #ff0000;
padding:10px;
font-weight: 600;
}
Jsfiddle Example here
============== Update ================
Or, on a second way of doing this, you could create this same thing like this:
.span8:nth-child(3) > p:nth-child(3) {
border:2px solid #ff0000;
padding:10px;
font-weight: 600;
}
But also need to remove all the <br /> from your code. I don't know why but these breaks are breaking the code (get it?! :P) when using .span8:nth-child(3) > p:nth-child(3)
Although instead of using <br /> you could add a margin-bottom to .span8 and then remove it on the last div
.span8{
margin-bottom:15px;
}
.span8:last-child {
margin-bottom:0;
}
Here's an example
I have a column layout design where I will have some fields on the left, and--when hovering one such field--info about them on the right. However, I can't seem to get it working. Please let me know what you think.
EDIT I am totally flexible to changing the HTML, CSS, or both. Also, I would prefer not to use javascript, if possible.
HTML:
<div id="content">
<div class="content-left">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p class="one_info">This is page1 right content</p>
</div>
</div>
CSS:
.content-left{
background-color: #bcc5d8;
display: inline-block;
float: left;
width: 75%;
margin-left:15px;
margin-right:5px;
}
.content-right{
background-color: lightsteelblue;
display: inline-block;
margin-right:15px;
//margin-bottom:16px;
}
.one_info{
opacity:0;
}
.one:hover .one_info{
opacity:1;
}
Code in motion:
https://jsfiddle.net/828qthhq/3/
Your CSS is written in a way such that .one_info will only get an opacity of 1 if it is a child of .one.
In other words, you would get the desired effect using the following HTML.
<div class="one">
Always visible
<div class="one_info">Show on hover</div>
</div>
In order to use your current HTML and still get the desired effect, you would need to use javascript.
As others have stated, the way you're doing it is a tad off! Here is a solution using javascript! I added onmouseover and onmouseout events to the first div which call a JS function to toggle the opacity.
<script>
function toggleInfo(on){
var styleToSet;
if(on){
styleToSet = "opacity:1";
} else{
styleToSet = "opacity:0";
}
document.getElementById("test").style=styleToSet;
}
</script>
<div id="content">
<div class="content-left" onmouseover="toggleInfo(1)" onmouseout="toggleInfo(0)">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p id="test" class="one_info">This is page1 right content</p>
</div>
</div>
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