Here is the HTML structure I am working with:
<div class="footerMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Feedback</li>
<li>Contact us</li>
</ul>
</div>
However, the following code snippet doesn't seem to work in IE8:
.footerMenu li:last-child { }
According to this MSDN link, the pseudo-selector should be supported in IE8. Any assistance on this matter would be greatly appreciated!
Your interpretation was incorrect. The statement clearly indicates that it is not compatible with IE8:
If you were considering :first-child, which is supported in IE7 and IE8, and assuming the same for :last-child... surprise! It's not the case.
:first-child belongs to CSS2 selectors, whereas :last-child was only incorporated in CSS3. Since Microsoft aimed for CSS2.1 compliance with IE8, they probably did not address :last-child until after IE8.
If you are certain there will be only four li elements, utilize adjacent sibling selectors to target the fourth li:
.footerMenu li:first-child + li + li + li
In addition to what the previous contributors have mentioned, another approach might involve utilizing JavaScript to populate any missing elements. Selectivizr serves as a prime illustration of how last-child support can be incorporated.
After checking the link you shared, it seems that it is not compatible with IE8 and only works for IE9 and above. Searching for information about last-child in IE8 brings up numerous other related questions on the topic.
Can you confirm the source of that information? According to my research, the CSS pseudo-class selector :first-child is compatible with IE7 and up, while :last-child works from IE9 onwards.
(Headers have been repositioned for easier reading)
While it is true that IE8 does not support the last-child selector, there are alternative solutions to address your issue. One option is to manually assign a class to the final <li> element. Alternatively, since this menu likely contains links, you can target the last link using an attribute selector, which is compatible with IE8. For example:
.navmenu a[href="contact.html"] { ... }
Consider implementing the following style:
.navList li {background-color: expression(this.previousSibling==null?'blue':'orange');}
Although it may be considered outdated, there is actually a straightforward method to achieve this:
If you only want to make the change in a specific list item (li), simply follow these steps:
<li style="yourstyle;">...</li>
My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...
I am exploring how to Transfer Database Data into an HTML Dropdown Selection Field using jQuery. I came across a useful example that seems promising. Although I am new to jQuery and JavaScript, I am eager to learn. My goal is similar to the approach descr ...
I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...
I am facing a peculiar issue in my browser where the content inside the angular curly braces is not being displayed. Even though there are no errors in the console and the value gets logged successfully, the page appears blank. The expected output should b ...
On Page_Load, I have two asp:BulletedLists - one is already filled with data while the other remains empty. Users have the ability to drag and drop <li>'s between these lists using the following function: function Move(element, source, target) { ...
I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...
Can a animated loading gif be implemented to load before the gallery images, or would it serve no purpose? The image will be loaded as a background using CSS. <link rel="stylesheet" href="loading.gif" /> Appreciate your help! ...
I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...
I currently have a block of HTML code that is repeated multiple times. <!-- Metropolitan Map --> <div> <app-map [name] = "(( environment.metropole_name ))" [layer_url] = "(( environment.metropole_layer_url ))" ...
Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...
My application generates numerous elements dynamically based on server data in JSON format. This process involves embedding a significant amount of HTML directly within my JavaScript code, leading to pollution and making it increasingly challenging and l ...
When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...
I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...
I have a piece of code that I need help with. It is related to printing the selected day of the week from the server: $daysOfWeek = array( "Monday" => 1, "Tuesday" => 2, "Wednesday" => 3, ...
Struggling with extracting the necessary information using Xpath. Specifically, it involves obtaining the Price - Subtotal from the HTML Image attached. The xpath code I have been using is provided below. What could be missing? Ultimately, my goal is to st ...
After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...
I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...
My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...
I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right? Here is the CSS and HTML code ...
In my Angular application, I have a navigation bar at the top that sticks in place (position: sticky; top: 0;). Beneath the navigation bar is the content, which includes Angular material components such as mat-buttons or mat-cards. The issue arises when ...