Is there a way in CSS to target list items that do not contain any unordered or ordered lists? The list item may have an anchor element within it. I am aware of how to achieve this using jQuery, but I am seeking a solution using only CSS or CSS3.
Is there a way in CSS to target list items that do not contain any unordered or ordered lists? The list item may have an anchor element within it. I am aware of how to achieve this using jQuery, but I am seeking a solution using only CSS or CSS3.
Currently, CSS does not have a selector that can check if an element contains another element or not. I tried using the :not() selector but it didn't work as expected.
However, there is a workaround using the :only-child selector. If you are certain that there will always be an <a> tag in your list and no other elements besides <ul>, you can achieve this:
HTML
<ul class="list">
<li><a href="#">Test</a></li>
<li>
<a href="#">Test</a>
<ul>
<li>Test2</li>
</ul>
</li>
</ul>
CSS
.list > li > a:only-child { color: red; }
This selects all <a> tags that are the only child of their parent tag.
While not a perfect solution, it works well with the provided HTML structure.
Check out my jsfiddle for a live example of the solution: http://jsfiddle.net/2Lxaah61/
There is no direct method to determine if a list contains a sublist.
One workaround is to assign a CSS class to all li elements:
.list > li { background:lightblue;}
To further refine this, you can use the following CSS:
.list > li:only-child { background:DarkBlue;}I hope this solution proves helpful!
I am working on a screen that can display up to 1000 data retrieved from the API. Here is the image: https://i.sstatic.net/ErbDD.png Now, I have implemented a drop-down box where users can select alphabetically from A to Z. After selecting an alphabetic ...
While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. https://i.sstatic.net/7K9FD.png I am using Mantine wit ...
Successfully sending a file to connect-busboy can be achieved by utilizing an HTML form's action attribute in the following manner: <form ref='uploadForm' method="post" action="http://localhost:3000/fileupload" enctype="multipart/form-da ...
Is it possible to create a table with only an outer border and exclude the bottom row, so that the bottom border of the second last row gives the appearance of being the final row? I am limited to using CSS as this is on Wordpress and I cannot make changes ...
I have a JSP page that contains the following code snippet: <li id="notifications"> <c:choose> <c:when test="${empty alerts}"> <p class="text-default">There are no Service Reminders at this time</p> ...
My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...
Looking for some assistance? Check out this codepen. I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the foc ...
There is a sidebar within a Google Sheet that runs an HTML file calling Materialize CSS. The sidebar contains three text inputs that work fine, but there is one text area that keeps failing. I am wondering if anyone has any thoughts on this issue. Here is ...
Hey there, After watching a youtube tutorial, I got inspired to create a hamburger menu. Everything was working smoothly when I resized my PC browser window to a specific width, as shown in the first screenshot: https://i.sstatic.net/shreo.png However, ...
I have created a jQuery code snippet to fetch all values from a select element that do not have the selected attribute. Here is the code: $('#purchaseEditUpdateItemBtn').on('click', function(){ var selected = []; $('#box2V ...
Suppose there are 3 separate lists list1 = ['2006-03-28','2006-04-05','2006-04-06'] list2 = ['IBM', 'MSFT', 'IBM'] list3 = [1000, 1000, 500] What would be the most effective way to merge these l ...
UniqueIdentifier123.svg <?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 100 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> & ...
I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...
My current structure is set up as follows: jQuery('tr').bind('click', function() { var p = jQuery(this); p.children('td').children('a').click(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery ...
After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additional ...
As I work on developing a Wordpress theme, I have encountered an issue with incrementing a load more button using Javascript. This is my first time facing this problem with a javascript variable, as I don't always use Wordpress. The variable pull_page ...
Highchart is new to me. I recently created a basic chart showing the count of males and females over the past five years. I have included a screenshot for reference. I am wondering if it's possible to remove duplicate labels from both axes? Below is ...
I am working on a problem regarding a .link class with an ::after pseudo element positioned underneath it to create a box-shadow effect upon hover. .bg { background-color: aqua; height: 100vh; } .link { position: relative; font-weight: ...
Hey there, I'm feeling a bit inexperienced with this question, so after struggling on my own for a while I decided to turn to stackoverflow for help. So, I have a website located at , and at the very bottom of the page there's some copyright inf ...
Recently, I delved into the world of Python3 regex and attempted to tackle an interesting problem. The challenge goes like this: You're given a string with the first part being a float or integer number, followed by a substring. Your task is to split ...