Is is possible to target last element inside a class div? CSS - javascript

I understand that I can target the last element if they are using the same class or they are the same element. But the way I am building is user will put in whatever element inside the (please see attached example). Just wondering is it still possible to call out by CSS? or that will be something cannot be done by CSS?
.header p:last-of-type{
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>

If you're trying to just add color: red; styling to the last <p> tag inside the last class='header' class, then you should use
CSS Selectors:
CSS:
.header:last-of-type p:last-of-type {
color: red;
}
You can check this working code sample.
Edit:
If you want to target the last element of each tag with the class='header', you coud accomplish it like so:
CSS:
.header *:last-child {
color: red;
}
Check the working code sample.

yes with last-child and .header p:last-child will target the last child if it's <p> </p> element and if you want to target the last element in a div that have a .header as a class.
you can use .header *:last-child as mention in the comments section by #Chris G
.header *:last-child {
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
<p>ddd</p>
</div>

try this
.header *:last-child{
color : red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>

Related

DIV Background Refuses to Change Color or Image

I wish to change the background of this section of the page:
And I want to change it to a background image of space, I tried using CSS but it refuses to work. I have looked up many times but the only thing it likes to do is outline the div section rather then actually change the image inside, why?
Code HTML:
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
And so fourth.
CSS:
#intro {
background-color: blue;
background: grey;
color: blue;
}
I also tried:
#intro {
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
}
Neither worked, it stayed white. But trying to outline it using CSS made it work just fine, why?
I also tried changing it with JS.
You are not able to edit an image with code.
Solution 1: Images, i.e. that one, cannot be changed using a code. To change the image background color, you would just fill it in using a photo editor, then change the image when it is triggered.
Solution 2: If you deleted the background, possibly using this tutorial, and put that in a div, and filled the background of the div your color, then it probably would work.
the tutorial might be difficult, so if that doesn't work, you can look it up.
Edit: That was not what this person was looking for, I will put the solution.
To change the background color, in CSS, add body {backgrounds color: color;}
In HTML, add in the <html> or <body> tag bgcolor="hexadecimal" where hexadecimal is the color you want in hexadecimal form.
Note: I would not recommend the second one.
Now of course if you wanted the background to change once an event happened, I would use jQuery .css(); function
$("#div").mouseenter(function() {
$("body").css("background-color", "blue");
});
$("#div").mouseleave(function() {
$("body").css("background-color", "white");
});
#div {
background-color: green;
margin-left: 100px;
margin-top: 100px;
height: 100px;
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"> Hello </div>
The events can be changed, and what happens can be changed. This was just an example.
To work with your code:
var background = 0;
$("#button").click(function() {
if (background == 0) {
$("#intro").css("background-color", "blue");
background = 1
} else {
$("#intro").css("background-color", "white");
background = 0
}
});
#button {
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button"></button>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
As you can see, I made it so that when you click the button, it makes the intro div's background go blue, and when clicked again it makes it white again.
Now, if you wish for it to be blue on startup, you could do this:
$("#intro").css("background-color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
I would not recommend that, but if it won't work with css, I guess you'll have to do with that.
Update: use !important at the end of the css block, because in your file 'style0ad1.css', it declared the class section-pro a color and made it prominent over any other declarations.
So to make it your space background: background: url("https://i.pinimg.com/originals/af/0f/c4/af0fc46fa7f05330435e9e71779af666.jpg") !important
Try it out!

Can you create an ordered list wityhout list items?

I have a markup that looks like this, all items are numbered based on their position. Can you create something like this automatically based on the number of items? Either with css or HTML, I know it's possible with javascript. Ideally I'd like it to write out 01.01, 01.02 etc but if it's possible to do with just one layer, that's ok too.
<section class="profile__section">
<h1 class="profile__section__header">01. Colors</h1>
<div class="container__profile__subsection">
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.01 Blue</h2>
<p class="profile__subsection__color" style="background: #36314C;">Hex: 36314C</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.07 Topics Blue</h2>
<p class="profile__subsection__color" style="background: #4A455D;">Hex: 4A455D</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.02 White</h2>
<p class="profile__subsection__color" style="background: #fff; color: black;">Hex: FFFFFF</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.03 Places Yellow</h2>
<p class="profile__subsection__color" style="background: #F4BA38;">Hex: F4BA38</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.04 Tag Blue</h2>
<p class="profile__subsection__color" style="background: #347591;">Hex: 347591</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.05 Tag Blue Light</h2>
<p class="profile__subsection__color" style="background: #d7e2e2;">Hex: d7e2e2</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">01.06 Time Blue</h2>
<p class="profile__subsection__color" style="background: #147562;">Hex: 147562</p>
</div>
</div>
</section>
<section class="profile__section">
<h1 class="profile__section__header">02. Cartegory Colors</h1>
<div class="container__profile__subsection">
<div class="profile__subsection">
<h2 class="profile__subsection__header">02.01 People Green</h2>
<p class="profile__subsection__color" style="background: #7CB93C;">Hex: 7CB93C</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">02.02 Comms Pink</h2>
<p class="profile__subsection__color" style="background: #D53668;">Hex: D53668</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">02.03 Photos Purple</h2>
<p class="profile__subsection__color" style="background: #993B9B;">Hex: 993B9B</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">02.04 Event orange</h2>
<p class="profile__subsection__color" style="background: #EA5B1D;">Hex: EA5B1D</p>
</div>
<div class="profile__subsection">
<h2 class="profile__subsection__header">02.05 Docs blue</h2>
<p class="profile__subsection__color" style="background: #54BBB6;">Hex: 54BBB6</p>
</div>
</div>
</section>
With CSS you actually really can order HTML elements. Not by element value thought.
See the CSS order property on W3Schools - CSS order
Below the extracted snipped from W3Schools
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
/* Safari 6.1+ */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}
/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the order property.</p>
<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-order property.</p>
Similair to an ordered list, the numbers I want to add is not a part of the content, and I need to move the content around and want the content to follow. Here is my solution:
body {
counter-reset: section;
}
.profile__section__header::before{
counter-increment: section;
content: counter(section, decimal-leading-zero) ". ";
}
.profile__subsection__header::before{
counter-increment: subsection;
content: counter(section, decimal-leading-zero) "." counter(subsection, decimal-leading-zero) " ";
}

Wrapping multiple recurring elements with jQuery wrapAll()

Hi I have been looking into a solution for this for ages. Basically I have a repeating structure as follows:
<div class="article">
<div>
</div>
<h2>
</h2>
<div>
</div>
<div>
</div>
</div>
<div class="article">
<div>
</div>
<h2>
</h2>
<div>
</div>
<div>
</div>
</div>
I need to wrap the last three child elements of .article in a div e.g.
<div class="article">
<div>
</div>
<div class="wrapper">
<h2>
</h2>
<div>
</div>
<div>
</div>
</div>
</div>
I have tried jQuery .before() and .after() but the elements close before I can call them both. This was my last ditch effort:
(function($) {
$(document).ready( function () {
var items = $(".article > *");
for(var i = 1; i < items.length; i+=3) {
items.slice(i, i+3).wrapAll("<div class='wrapper'></div>");
};
});
})(jQuery);
This works fine for the first .article but ruins the rest of the code.
Real life example here:
http://www.blanketmedia.com.au/Cruise/hotnews.jsp
Loop over the elements, select the children, remove the first, and wrap them.
$(".article").each( function () {
$(this).children().slice(1).wrapAll('<div class="wrapper"></div>');
});
.article { background: yellow; }
.wrapper { background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
<div>1
</div>
<h2>2
</h2>
<div>3
</div>
<div>4
</div>
</div>
<div class="article">
<div>5
</div>
<h2>6
</h2>
<div>7
</div>
<div>8
</div>
</div>
Try this:
$('.article *:nth-child(3)').wrap("<div class='wrapper'></div>");
Here is another solution:
$('.article').each(function(){
var articleChildren = $(this).children();
var lastThreeElements = articleChildren.slice(Math.max(articleChildren.length - 3, 1));
lastThreeElements.wrapAll('<div class="wrapper">');
});
.article { background: yellow; }
.wrapper { background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
<div>Div 1
</div>
<h2>Header 1
</h2>
<div>Inner Div 1
</div>
<div>Inner Div 2
</div>
</div>
<div class="article">
<div>Div 1
</div>
<h2>Header 1
</h2>
<div>Inner Div 1
</div>
<div>Inner Div 2
</div>
</div>

nth-of-type inside a div not working

I'm trying to select the first <h6> element inside the #user-attributes div with this css selector:
this.country = fixture.debugElement
.query(By.css('div#user-attributes h6:nth-of-type(1) ')).nativeElement;
But it isn't working. Why not?
I need to then select say the 3rd and 4th <h6> inside the #user-attributes div so I'm using :nth-of-type.
Don't worry about the jasmine syntax, that's just how jasmine gets html elements with css.
My html:
<div _ngcontent-cvy-35="" class="card-noshadow" id="user-attributes">
<div _ngcontent-cvy-35="" class="row">
<div _ngcontent-cvy-35="" class="col-xs-12">
<img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/maps-green.png">
<h6 _ngcontent-cvy-35="">New Zealand</h6>
</div>
</div>
<div _ngcontent-cvy-35="" class="row">
<div _ngcontent-cvy-35="" class="col-xs-12">
<img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/refresh.png">
<h6 _ngcontent-cvy-35="">member since Mon Oct 13 2014 00:00:00 GMT+1300 (NZDT)</h6>
</div>
</div>
<div _ngcontent-cvy-35="" class="row">
<div _ngcontent-cvy-35="" class="col-xs-12">
<img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/clock.png">
<h6 _ngcontent-cvy-35="">last seen Thu Oct 13 2016 11:13:00 GMT+1300 (NZDT)</h6>
</div>
</div>
<div _ngcontent-cvy-35="" class="row">
<div _ngcontent-cvy-35="" class="col-xs-12">
<img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/badge.png">
<!--template bindings={
"ng-reflect-ng-for-of": "active User,helper"
}--><div _ngcontent-cvy-35="" id="badges">
<div _ngcontent-cvy-35="" class="badge">
active User
</div>
</div><div _ngcontent-cvy-35="" id="badges">
<div _ngcontent-cvy-35="" class="badge">
helper
</div>
</div>
</div>
</div>
</div>
I'm going to take a shot without seeing the HTML.
The main issue (probably) is that nth-of-type() works differently than you think. Elements using nth-of-type() need to be siblings. If the element you are targeting is nested inside other elements it won't work.
I'm guessing your markup is something like this:
<div id="user-attributes">
<div>
<h6>Header</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
If so, #user-attributes h6:nth-of-type(2) wouldn't match the second <h6> because it's the first of type in #user-attributes > div > h6. The above <h6> are not siblings (but their parent <div> are).
#user-attributes h6:nth-of-type(2) {
color: red;
}
<div id="user-attributes">
<div>
<h6>Header</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
But the following markup will:
<div id="user-attributes">
<div>
<h6>Header</h6>
<h6>Header</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
#user-attributes h6:nth-of-type(2) {
color: red;
}
<div id="user-attributes">
<div>
<h6>Header</h6>
<h6>Header</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
If your markup is similar to this, you'll have to move up the document tree and possibly use a different selector.
#user-attributes > div:nth-of-type(2) h6 {
color: red;
}
<div id="user-attributes">
<div>
<h6>Header</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
As you can see things could get tricky with the following example:
#user-attributes > div:nth-of-type(2) h6 {
color: red;
}
<div id="user-attributes">
<div>
<h6>Header</h6>
<h6>Header (Why am I not red?)</h6>
</div>
<div>
<h6>Header</h6>
</div>
</div>
At this point you'd likely want to move towards adding a class to specific <h6>. You could continue using nth-of-type(), but might get a bit hairy as you'd use multiple selectors with multiple nth- pseudo classes per selector.
From a CSS perspective it looks ok:
div#user-attributes h6:nth-of-type(1) {
background: red;
}
div#user-attributes h6:nth-of-type(2) {
background: green;
}
div#user-attributes h6:nth-of-type(3) {
background: blue;
}
<div id="user-attributes">
<h6>first</h6>
<h6>second</h6>
<h6>third</h6>
</div>
Are you sure your html is as you think it is?

Remove class from div with loop/array

I have 4 divs with same Class and Id. What I am looking for is to remove display-none-class on that specific div whenever #button is clicked.
What I have done now is to give an additional class name to each div so they are more "recognizable" for jQuery.
Here is my code:
html
<div class="parentdiv">
<h3 id="button">remove class</h3>
<div class="display-none" id="element">
Show me on button click
</div>
</div>
jquery
$('h3#button').each(function(i){
$(this).addClass('remove-btn-' + (i+1));
});
$('div#element').each(function(i){
$(this).addClass('remove-this-' + (i+1));
});
So What I am looking for is to loop through remove-this-1, remove-this-2 etc and remove display-none class when ever remove-btn-1, remove-btn-2 etc is clicked.
Use one more class to the div which has display-none class
give same class to each button
wrap them in a parent them
use this to achieve your goal
Whenever you click on the button, it will look for class box of current clicked the button. For demo purpose - I have applied CSS to display-none class, So that you can see changes.
$(document).ready(function(){
$('.button').click(function(){
$(this).prev('.box').removeClass('display-none');
});
});
.display-none {
display: inline-block;
padding: 5px;
background: tomato;
color: #fff;
border-radius: 3px;
}
.button {
display: inline-block;
padding: 5px;
background: steelblue;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="display-none box">Lorem ispum 0...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 1...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 2...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 3...</div>
<p class="button">Remove Class</p>
</div>
Are you looking for something like this
$('.button').click(function(){
$(this).next().removeClass('display-none');
});
.display-none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 1
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 2
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 3
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 4
</div>
</div>
First of all the id (#) value has to be unique. I suggest you creating unique ids.
For removing a class from an element with jquery you can use the .removeClass('class_name')

Categories