I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to another page, the anchor tag used to make the link makes the div layout messed up?
Here is my code and an image
before I add the anchor tag around the div
after I add the anchor tag around the div
<div class="container">
<div class="row">
<a href="floor0.html">
<div class="item col-lg-4">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</div>
</a>
$(".item").click(function() {
window.location = $(this).data("location");
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item col-lg-4" data-location="floor0.html">
<p> floor zero </p>
</div>
You can do similar like this to avoid this css conflict with anchor tag and also to make a div clickable and redirect to destination link. If you run this code you will find 404 error code as there is no file here. Thank you. If this helps you then please make it accepted.
Your mark up needs to be updated as you have some closing div tags missing, not sure if this just the case in the code in your question. The markup should be:
<div class="container">
<div class="row">
<div class="item col-lg-4">
<a href="floor0.html">
<p> floor zero </p>
</a>
</div>
</div>
</div>
You need to give the <a> a style property of display: block; like this:
.item a {
display: block;
}
The anchor will now cover the whole div and work the way you expect it to. It's also a good idea to note; if using a framework like Bootstrap the order of divs is important to make sure the grid behaves as expected, it should always be:
container > row > col
Managed to solve this issue by removing the div with the column classes and then adding the classes from the removed div to the anchor tag
<div class="container">
<div class="row">
<a class="item col-lg-4" href="#">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</a>
Try reading this: Is putting a div inside an anchor ever correct?.
If your goal is to open a link when the div is clicked you can try putting an onClick=(window.location.href='link here') event on the div tag or use jQuery event in script $('div').click(function(){window.location.href='link here'});
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
Like if I had:
<div class="body">
<div class="logo">
<img...>
</div>
<p>some text</p>
</div>
Could I go...
<div class="body">
<div class="logo">
<img...>
</div class="logo">
<p>some text</p>
</div>
...so that it knows to end the second div and not the first?(this is a light example of what I am trying to do, but I think you get it)
(and if it is possible, a way using just HTML or css)
If your motive is to identify the closing tag effectively means, possibly you can use the comments
<div class="body">
<div class="logo">
<img...>
</div> <!-- logo div closed here -->
<p>some text</p>
</div>
Proper formatted code will help to find the closing tag hierarchy.
Nope.
Closing tags always close the most recently opened matching tag. In your example, it simply works as desired. And the alternative would not be valid markup: tags cannot overlap.
I don't think you can, but great news coming: you don't need to!
The moment you put a </div>, than the closest (going backwards) div (and therefore its class/classes) will close.
Indentation helps understanding how it works:
<div class="first">
<div class="second">
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "second" -->
</div> <!-- Next closing div closes "first" -->
</div>
Another example:
<div class="first">
<div class="second"> <!-- Next closing div closes closest one, in this case "second" -->
</div>
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "first" -->
</div>
Notes:
You might want to look into learning how to style element's children, like all the <p> elements in all <div> elements which have the class="cool".
This could avoid the need to close and reopen the same classes multiple times.
This game teaches child selection in a great and visual way: http://flukeout.github.io
Lastly, note that there currently is no parent selector in CSS. What that is (Er.. would be) you'll figure out yourself soon after learning about child selection.
I have a problem, maybe it's obvious, but I couldn't find any answers how to do this.
I have a structure like this on my website:
<div class="row-even">
<article class="featured-job">a</article>
</div>
<div class="row-odd">
<article class="featured-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">a</article>
</div>
<div class="row-odd">
<article class="regular-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">c</article>
</div>
This tiny thing is generated by PHP for listing some articles from two types, a Featured job, and a Regular job. I want to separate these two content types by adding a margin-top for the first one of the .regular-job articles. I tried using first-line, first-child, first-of-type, all from the first-* and even tried nth-child, but nothing worked for me.
(I know these separators working on the parent of the element I am using on.)
Is there any way it can be done?
The problem with first-child and regular-job is that the articles are not directly in the same parent because they are nested in row-even & row-odd. You either could wrap the regular-job rows in another div which gets the margin applied or add another class to the first row containing a regular-job. You could even add a class directly to the first regular-job.
I don't know how you PHP loop looks like, but maybe try to use a counter for that matter.
If needed I will gladly provide an HTMl/CSS example!
You would probably want to do someting like that:
div:first-child .regular-job {
margin-top: 20px;
}
You select the first parent element that has the child of .featured-job.
PS. Be careful where you are applying the margin, it won't work on inline elements or if you want to separate the parent elements then applying it to the article is not a good idea.
As Sven says, the problem is that you need the elements to be siblings for this selectors to work.
Set a class in the parent, matching the one of the child:
HTML
<div class="row-even featured-father">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured-father">
<article class="featured-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular-father">
<article class="regular-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">c</article>
</div>
Then, it is easy to set the CSS. for instance:
.featured-father + .regular-father article {
background-color: red;
}
fiddle
while iterating in the PHP, add another dummy class with index.
Then it will be a piece of cake to make your custom class:
<div class="row-even featured_1">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured_2">
<article class="featured-job">b</article>
</div>
<div class="row-even regular_1">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular_2">
<article class="regular-job">b</article>
</div>
<div class="row-even regular_3">
<article class="regular-job">c</article>
</div>
notice the two introduced classes: featured_X and regular_X.
then:
.regular_1{
margin-top:50px;
}