We Keep Coding

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

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>

How to show the content of a custom nav tab with JQuery?

I have made custom tabs with a function in JQuery. This is my custom tabs:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="item1">
Show content from item 1
</div>
<div class="item2">
Show content from item 2
</div>
<div class="item3">
Show content from item 3
</div>
This is the custom styling I made with the tabs:
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
And this is my function to activate the tabs (working)
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
//show div for item1
break;
case 'item2':
//show div for item2
break;
default:
}
When I switch from tab I want to show the content from the class. I have tried with the toggle() function from JQuery. Also I have checked this stackoverflow post:
Bootstrap tab activation with JQuery
This is what I want but it didn't work for my solution because I don't use the nav tabs of bootstrap.
How can I show the content from each nav tab?

To show content you can simply call show() on it. You can also make your logic more DRY and extensible by converting the clickable div elements to a and using the href attribute to target the content to be displayed. This saves you having to write endless if conditions or switch cases, as it will work for an infinite number of tabs. It also means that, if required, you can open tabs when the page loads via the fragment of the URL. Try this:
let $tabs = $('.tab-content');
let $triggers = $('.master-advanced-left-tab').on('click', function(e) {
e.preventDefault();
$triggers.removeClass('master-advanced-left-tab-active');
var $elem = $(this).addClass('master-advanced-left-tab-active');
$tabs.hide();
$tabs.filter($elem.attr('href')).show();
});
$triggers.first().trigger('click');
.master-advanced-left-tab {
display: block;
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab>p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab-content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<a href="#item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</a>
<a href="#item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</a>
<a href="#item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</a>
</div>
<div class="tab-content" id="item1">
Show content from item 1
</div>
<div class="tab-content" id="item2">
Show content from item 2
</div>
<div class="tab-content" id="item3">
Show content from item 3
</div>

hide and show the method can be used for this purpose, Hope this helps
$('.master-advanced-left-tab').click(function(e){
$(this).addClass('master-advanced-left-tab-active').siblings().removeClass('master-advanced-left-tab-active')
var class1 = $(this).attr('data-id')
$('.'+class1+'').removeClass('hide').siblings().addClass('hide')
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
.master-advanced-left-tab-active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="wrap">
<div class="item1 ">
Show content from item 1
</div>
<div class="item2 hide">
Show content from item 2
</div>
<div class="item3 hide">
Show content from item 3
</div>
</div>

You can see my code:
<div class="row">
<div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
<p>Item 1</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item2">
<p>Item 2</p>
</div>
<div class="col-4 master-advanced-left-tab" data-id="item3">
<p>Item 3</p>
</div>
</div>
<div class="content-item item1 active">
Show content from item 1
</div>
<div class="content-item item2">
Show content from item 2
</div>
<div class="content-item item3">
Show content from item 3
</div>
Css: add more some line:
.content-item {
display: none
}
.content-item.active {
display: block
}
Then JS:
$('.master-advanced-left-tab').click(function (){
let elem = $(this);
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
$('.content-item').removeClass('active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
case 'item1':
$('.item1').addClass('active')
break;
case 'item2':
$('.item2').addClass('active')
break;
default:
$('.item3').addClass('active')
}
})
This is a demo: https://codepen.io/phuongnm153/pen/vYBXBGM

Instead of swith you can use something more responsive like this:
function changeTab(element) {
// remove 'active' class from item and tab to prevent multiple
// tab selection
$('.master-advanced-left-tab').removeClass('active');
$('.tab').removeClass('active');
// add class 'active' to clicked item and proper tab
// tab class is taken from 'data-tab' property from item in html
$(element).addClass('active');
$('.tab.' + $(element).data('tab')).addClass('active');
}
// change tab to first at init to prevent none tab selected
// You can replace this by adding class 'active' to
// 'master-advanced-left-tab' and 'tab' item in html
changeTab( $('.master-advanced-left-tab:first-child') );
// not much to explain
$('.master-advanced-left-tab').on('click', function(){
changeTab(this);
})
.master-advanced-left-tab {
overflow: hidden;
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
}
.master-advanced-left-tab > p {
text-overflow: ellipsis;
height: 20px;
}
/* changed from .master-advanced-left-tab-active to shorten code */
.master-advanced-left-tab.active {
color: #1C72DF;
border-bottom: 3px #1C72DF solid;
}
.tab {
height: 0;
overflow:hidden;
}
.tab.active {
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<!-- property 'data-tab' for js function to select proper tab -->
<div data-tab="item1" class="col-4 master-advanced-left-tab">
<p>Item 1</p>
</div>
<div data-tab="item2" class="col-4 master-advanced-left-tab">
<p>Item 2</p>
</div>
<div data-tab="item3" class="col-4 master-advanced-left-tab">
<p>Item 3</p>
</div>
</div>
<div class="tab item1">
Show content from item 1
</div>
<div class="tab item2">
Show content from item 2
</div>
<div class="tab item3">
Show content from item 3
</div>

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!

Show different content in a single container when clicking a product (jQuery)

I'm trying to create a shop with about 100 products, each one with it's own id and description. The description box should show up whenever the user clicks the product. Because the content of this description box has to change depending on which product was clicked(eg, showing a different brand, id, price and photo), my best idea is to create 100 hidden containers (description boxes) and make them show up when the user clicks the product.
Is there a faster option? (Eg: Creating only 1 description box and change the content inside on click?)
$(document).ready(function() {
$(".view").click(function() {
$("#full-description-box").show();
});
});
.product,
#full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
#full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div id="full-description-box">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 id="brand">Brand name:</h3>
<h4 id="full-name">Model: </h4>
<h5 id="item-id">ID: </h5>
<p>Full Description: </p>
<h4 id="price">Price:</h4>
</div>
<!-- END DESCRIPTION BOX -->

This is a solution without changing to much to your existing code.
Note:
I removed the id attributes as ids should be unique!
I added data-view-id="product002" to the detail container
$(document).ready(function() {
$(".view").click(function() {
// $(this).attr('id') is the id of the clicked .view element
$('[data-view-id="'+$(this).attr('id')+'"]').toggle();
});
});
.product,
.full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
.full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div class="full-description-box" data-view-id="product001">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product001</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>
<div class="full-description-box" data-view-id="product002">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product002</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>

Bullet Points between div

I have the following code to display 4 Buttons:
#buttons {
text-align: center;
padding-top: 4%;
}
#buttons img {
display: inline-block;
list-style: none;
padding: 10px;
}
#buttons p {
color: #fff;
font-family: ;
font-weight: 600;
font-size:19px;
}
#buttons li {
display: inline-block;
}
<div class="row" id="buttons">
<div class="large-3 small-12 columns">
<span id="bullets"></span>
<img src="images/icons/question_icon.png"><p>Was ist Schnittchen</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p>
</div>
<div class="large-3 small-12 columns">
<span id="bullets">•</span>
<img src="images/icons/kiss_icon.png"><p>Was erwartet Sie</p>
</div>
</div>
The finally result is on: http://www.be-virtual.org/schnittchen
Now i want bullet points between this divs like:
Its very important that the result is responsive and that the bullet points are not visible on a mobile phone.
Have anyone a idea to realize that?

You could use flex and mediaquerie.
example
#buttons {
display:flex;
text-align:center;
flex-wrap:wrap;
}
#buttons:before,
#buttons:after {/* you may use also justify-content ... */
content:'';
flex:1;/* will use as much space as possible pushing content into middle */
}
.dots {/* style these as you wish, made simple for demo */
border-top:dotted 6px #AD1616;
width:1.5em;
height:3em;/* to set at middle's height of icon*/
margin:auto 2em;/* vertical centering and keep some room around */
}
#media ( max-width : 950px ) {/* set here your breaking point demo is at 950px */
.dots {
display:none;/* hide dots */
}
#buttons {
display:block;/* back to regular display to pile icone/links */
}
}
<div id="button_bg" class="hide-for-small">
<div class="row" id="buttons">
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/question_icon.png"><p>Was ist Schnittchen</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p>
</div>
<div class="dots"></div>
<div class="large-3 small-12 columns">
<img src="http://www.be-virtual.org/schnittchen/images/icons/kiss_icon.png"><p>Was erwartet Sie</p>
</div>
</div>
</div>
Run snippet in full page mode and resize window to see behavior

Add "•••" to each button, except the first one, like this:
<div class="large-3 small-12 columns">
<span id="bullets1"></span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
<div class="large-3 small-12 columns">
<span id="bullets2">•••</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
<div class="large-3 small-12 columns">
<span id="bullets3">•••</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>
Depending on how your responsive layout JavaScript is set up, you will need to conditionally set the span element's display to "inline" or "none" based on if the site is being loaded in a mobile browser or not:
if(ismobile){
document.getElementById("buttons1").style.display = "none";
document.getElementById("buttons2").style.display = "none";
document.getElementById("buttons3").style.display = "none";
}
else{
document.getElementById("buttons1").style.display = "inline";
document.getElementById("buttons2").style.display = "inline";
document.getElementById("buttons3").style.display = "inline";
}