I am currently facing the following scenario:
<div class="container">
<div class="pagination-bar"></div>
<div class="article"></div>
[..]
<div class="article"></div>
<div class="pagination-bar"></div>
</div>
Additionally, I have this CSS block:
.article {
margin-bottom:20px;
}
Is there a way for me to position the pagination-bar near the final "article" div without the 20px margin?
UPDATE: [consider displaying the pagination-bar at both the top and bottom of the container div]
Here is an example of how you can achieve this, while also ensuring compatibility with IE7
div.article + div.article {
margin-top:20px;
}
By using this CSS code, a margin will be added on top of each article except for the very first one.
Give this a shot:
.wrapper > section:nth-last-of-type(2) + .sidebar { background-color: blue; }
The :nth-last-of-type selector will target the second to last section within the wrapper, and using the + combinator will select the adjacent element with the class of .sidebar.
Test it out here: http://jsbin.com/kuwizi/
Keep in mind that browser support for this pseudo-class may be limited.
Here's the solution:
div.container div.article:last-child {margin-bottom: 0;}
It seems like there may be a misunderstanding in the question you've posed. It looks like the issue lies with the margin on the last article div, not the .pagination-bar. Therefore, removing the margin-bottom from the last article div without adding .pagination-bar might be the correct approach.
While many have suggested using the :last-child selector, it's worth noting that this CSS feature is not compatible with Internet Explorer versions 5.5 through 8, as outlined on http://www.quirksmode.org/css/contents.html.
I'm struggling to vertically center my container in the Skeleton boilerplate. I've tried a few things, but it just won't align properly. Any tips or tricks would be greatly appreciated! HTML: <div class="container"> <div cla ...
Is there a way for me to smoothly transition the background color of my navigation, similar to this example? Article.js import React, { useRef, useEffect } from 'react'; import Grid from '@mui/material/Grid'; import { Link as RouterL ...
I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...
I am attempting to display a modal exclusively on mobile devices. Despite my confidence in the correctness of my JavaScript, it is not functioning as expected. Would anyone be willing to review and provide assistance? <div class="col-5 col-sm-2 ml-au ...
My team at the company is using a menu created by another developer. I recently added a dropdown selection to the first item on the menu, but I've run into an issue where the dropdown box does not fully fill the item, and I can't seem to fix it. ...
As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...
I need some assistance with my chat functionality. I want to prevent users from sending empty messages, so I want to make the input field required. Can you please help me with this? I have already tried adding "required='required'" to the input ...
Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...
Why is IE11 unable to calculate this? The console shows it as invalid (highlighted in red) h6 { ... font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16)); ... } However, the following code works ...
I am currently working on creating a unique background design for my divs. I envision a rectangle with rounded corners, but with the right corner positioned lower than the left one. What is important is that the height difference between the two corners re ...
At the top, there are two divisions and on a cellphone device, the second one is meant to become fixed after the user scrolls past it. To see an example of what I am trying to achieve, check out this link: https://jsfiddle.net/livibetter/HV9HM/ Specifica ...
I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead. Both the logo and text with ...
I'm having trouble getting my mobile-first design to work properly because the header doesn't resize in mobile view. I'm satisfied with how it looks in full-screen, but I haven't been able to make any media queries work. You can downloa ...
Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...
I've been working on implementing a collapsible menu on a website, but I'm running into issues with the toggle button. The button appears fine, but it's not responding when clicked. I must be overlooking something simple. Any assistance wou ...
I'm struggling to align the font awesome icons with a lower text section in the center. Here is the HTML code snippet: .education-title { font-family: Alef, Arial, Helvetica, sans-serif; text-align: center; font-size: 1.5em; } .edu-co ...
Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...
How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...
I'm working on creating a layout in HTML/CSS/Bootstrap with an image and text below it. The challenge is to ensure that the text always starts at the left border of the image, regardless of its length. Here's what I need the layout to look like: ...
Looking to display a button with an SVG image and text side by side in a row. This is how I am currently doing it: <button class='btn btn-primary' style='background-color:purple; display: flex;'> <div style='text-alig ...