.app-btn {
font-size: 0px !important;
}
.app-btn:after {
content: '+2500';
visibility: visible;
font-size: 15px !important;
}
.app-btn:after:nth-child(1) {
content: "+18000";
}
.app-btn:after:nth-child(2) {
content: "+14000";
}<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>The issue lies with the CSS selector currently being used. The selectors for the buttons are not matching correctly:
.app-btn:after:nth-child(1) { ... }
.app-btn:after:nth-child(2) { ... }
Since each button is a direct child of the parent div, that selector doesn't work as intended.
A better approach would be to use nth-child on the parent div (or possibly nth-of-type) and then target the descendant app-btn element:
.app:nth-child(1) > .app-btn:after { ... }
.app:nth-child(2) > .app-btn:after { ... }
See the following example for a demonstration:
.app > .app-btn {
font-size: 0px !important;
}
.app > .app-btn:after {
content: '+2500';
visibility: visible;
font-size: 15px !important;
}
.app:nth-child(1) > .app-btn:after {
content: "+18000";
}
.app:nth-child(2) > .app-btn:after {
content: "+14000";
}<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
<button class="app-btn">CHANGE</button>
</div>I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...
I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...
After generating a model in Laravel, I attempted to migrate the table using 'php artisan migrate', but encountered an error message on the terminal: "Call to a member function index() on null" ...
There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...
My container div contains 6 inner divs, but they are not properly centered on the page. Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it mi ...
My goal is to have a module or alert box display when my website is opened, and then disappear after 5 minutes. To see an example of what I'm looking for, take a look at this website: On that website, there is a facebook.com box that automatically d ...
I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...
Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...
When I add padding to a textarea element and type more than four lines of content, the content overflows into the padding. Is there a way to prevent this? I have looked at the suggestions in this thread and this one (specifically for google-chrome), but t ...
When uploading a file within an HTML form, you can validate the extension using JQuery's Validation plugin: <form enctype="multipart/form-data" id="form-id"> <input type="file" name="file-id" id="file-id" /> </form> To validate ...
I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...
My goal is to add an outer div container by first appending it, then adding content, and finally appending the closing tag. However, I'm encountering an issue where the div I added at the beginning automatically closes itself, resulting in two separat ...
Let's break down the logic: When the enter key is pressed, we want to execute the following conditional statement: if (!elementB.isOpen) { elementB.open(); } else { elementC.open(); elementC.focus(); elementB.close(); } I attempted ...
Currently, I am in the process of developing my first website. My main goal is to create an image gallery that displays thumbnails of images and expands them when you hover over each one. Initially, I adjusted the sizes of the images to 100px*100px using H ...
Having a function that determines a user's role is functioning correctly within the HTML document. However, when multiple functions are involved in connecting to a database and displaying information, I encounter issues with granting access to certain ...
I came across this code snippet while working on creating a customized new tab page for Firefox. <input class="searchBar search_google" type="text" name="q" placeholder="Google" search_/> However, I'm confused about the search_ ...
To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...
Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...
I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...
Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...