Hello there,
I am looking for a way to keep the padding consistent in <li> elements, but have it applied to the <a> tag instead when it's a link (to create a larger selection area).
li a {
padding: 1rem;
}
li:not(a) {
padding: 1rem;
}<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul><a> element if it exists, rather than the <li><a>, then the padding should be applied to the <li>To achieve the desired effect, apply negative margins to the a element so that its padding aligns with the li element's padding.
li {
padding: 1rem;
}
li a {
margin: -1rem;
padding: 1rem;
}<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>When it comes to achieving this task, Mr Lister's solution is effective, but I personally prefer not using negative margins. Therefore, I wanted to propose a couple of alternative methods.
Pure CSS Approach (compatible with all browsers):
In the following example, I have enclosed non-<a> contents within a span element inside each <li>. The height for each <li> is calculated using the calc function.
A CSS variable is also utilized here for easy adjustment of padding values in one place, which can be omitted if necessary.
:root {
--li-padding: 1em;
}
li {
height: calc(100% + (var(--li-padding) * 2));
line-height: calc(100% + (var(--li-padding) * 2));
background: tomato;
}
li>* {
padding: 0 var(--li-padding);
}
li a {
display: inline-block;
background: rgba(255, 255, 255, 0.6);
}<ul>
<li><a href="#">Line 1</a></li>
<li><span>Line 2</span></li>
<li><a href="#">Line 3</a></li>
</ul>Pure CSS Approach (currently unsupported by any browser, yet):
This method conforms to a proposed standard for CSS Level 4, though it is not implemented in any browser at present. However, it's worth mentioning for future reference.
li:not(::has(> a)) {
padding: 1em;
}
li>a {
padding: 1em;
}<ul>
<li><a href="#">Line 1</a></li>
<li>Line 2</li>
<li><a href="#">Line 3</a></li>
</ul>Utilizing JavaScript:
With Javascript, we can scan through all <li> elements and apply specific actions based on their content. Here's a quick example demonstrating this concept (colors are used to indicate where <a> tags start).
let liSelector = document.querySelectorAll('li');
for (let i = 0; i < liSelector.length; i++) {
let str = liSelector[i].innerHTML;
if (str.includes("</a>")) {
liSelector[i].querySelector('a').style.padding = "1em";
liSelector[i].querySelector('a').style.display = "inline-block";
} else {
liSelector[i].style.padding = "1em";
}
}li {
background: tomato;
}
li a {
background: rgba(255, 255, 255, 0.6);
}<ul>
<li><a href="#">Line 1</a></li>
<li>Line 2</li>
<li><a href="#">Line 3</a></li>
</ul>Conclusion: While Mr Lister's solution should suffice, exploring multiple options can enhance problem-solving skills and prepare for future challenges. I trust you will find this information beneficial 🙂
Here is a jQuery example:
$('li').each(function() {
if($(this).find('a').length) {
$(this).addClass('extrapadding');
}
});.extrapadding a {
padding: 1rem;
}
li:not(.extrapadding) {
padding: 1rem;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't qui ...
Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...
I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...
Can someone help me style table cells that have contentEditable set to "true"? I've tried various CSS selectors like td[contenteditable], td[contenteditable=true], and td[contenteditable="true"], but none seem to work. Is there a specific selector for ...
Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...
After successfully importing the solana/web3.js package and running it within a NodeJS file, everything was working fine. However, things took a turn when attempting to connect this file with basic HTML, resulting in an error being thrown. import { Tra ...
I am in the process of developing a web application that features two full-height columns utilizing Flexbox in Bootstrap v4. Each column contains a sortable list that can be rearranged using jQuery UI Sortable. HTML: <div class="container-fluid h-100 ...
I need the .content within the main container .box to resize proportionally to match the width of the .box exactly, without being smaller. .box { width: 95%; background-color: red; padding: 20px; text-align: center; margin: 55px auto 40px; } . ...
I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...
After exclusively working on live domains or subdomains in the past, I recently experienced the benefits of working on localhost. Utilizing a Wamp server on my Windows machine, I store my project in C:/wamp64/www/[project_name]. I have always used relativ ...
I have rows containing two flex divs each. One div displays an image, while the other has text. I'm puzzled as to why some divs display correctly while others have overflowing text. Refreshing the page resolves this issue, but it resurfaces if I clea ...
I am having issues with the CakePdf Plugin (CakePdf.DomPdf) as it is not recognizing my stylesheet. Despite copying my /View/Layouts/default.ctp to /View/Layouts/pdf/default.ctp, the pdf file generated does not reflect the styling. Could this be due to t ...
Below is the XML file I am working with: <data> <temp>21</temp> <humidity>17</humidity> <analog>670</analog> <analog>908</analog> <analog>628</analog> <analog>909</analog> <L ...
My attempt to retrieve specific text content from various HTML tags using BeautifulSoup (BS4) proved unsuccessful. The code snippet I used only managed to extract the first text item after the <td tag, leaving out the rest that I needed. My goal is to p ...
I am working on creating a 3x3 grid using Bootstrap. My goal is to have consistent spacing between the rows and columns. How can I achieve this effectively? ...
I am currently working with angular 9 and I have a requirement to connect data entered in HTML forms to the corresponding fields in my Angular class. Below is the structure of my Angular class: export interface MyData { field1: string, textArea1 ...
I am looking for a solution to tally specific child elements, excluding those housed within an element with a certain class. To count elements, I currently use $('.search-me').find('[class*=seI\\-]').length within a div conta ...
I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...
I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...
I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...