Is there a way to specifically target the nested li elements in my css selector?
li:first-child {
background-color: rgb(236, 236, 236);
list-style-type: none;
margin-bottom: 3px;
padding: 8px;
}<ul>
<li>This one should be targeted</li>
<li></li>
<li>
<ul>
<li>But not this nested one</li>
<li></li>
<li></li>
</ul>
</li>
</ul>Utilize the parent of the initial ul element and add > to select immediate children (for more information, refer to this resource). Here is an example:
body > ul > li:first-child {
background-color: rgb(236, 236, 236);
list-style-type: none;
margin-bottom: 3px;
padding: 8px;
}<ul>
<li>to be selected</li>
<li></li>
<li>
<ul>
<li>not to be selected</li>
<li></li>
<li></li>
</ul>
</li>
</ul>You have the ability to define the styles, and then reverse them if needed.
li:first-child {
background-color: rgb(236, 236, 236);
list-style-type: none;
margin-bottom: 3px;
padding: 8px;
}
li li:first-child {
background-color: inherit;
list-style-type: inherit;
margin-bottom: inherit;
padding: inherit;
}
Fiddle; https://jsfiddle.net/wLspzcho/
Here is a CSS code snippet that you can try out:
.first > li:first-child {
background-color: rgb(236, 236, 236);
list-style-type: none;
margin-bottom: 3px;
padding: 8px;
}<ul class="first">
<li>to be selected</li>
<li></li>
<li>
<ul>
<li>not to be selected</li>
<li></li>
<li></li>
</ul>
</li>
</ul>In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...
I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...
I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...
Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...
Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...
I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...
I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...
Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected. You can view the problem here: sandbox. import React from "react"; import ...
I am encountering some challenges with the CSS on my website. I developed the site without considering Internet Explorer, and now that I am trying to address IE bugs, it feels like a daunting task. How do you approach debugging in situations like these? ...
While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...
Examining the content of this css file (focusing on the last 5 lines specifically): #page section .s_1 { overflow:hidden; width:435px; float:left;} #page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;} # ...
I'm currently working on a website with a focus on responsibility, and I've incorporated 'waves' SVG images as a background-image. The issue arises when viewing the site on smaller screens, such as mobile devices, where the background a ...
I'm not a developer and I find myself stuck in the panTo() function. All I want is to execute this function with an if-else statement without having to reload the Google Map or using jQuery. <body> <div id="map"></div> <d ...
I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...
A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...
Html: <div id="js-cert-file" class="form-group"> <button id="js-ob-browse-n-upload" class="btn btn-ob browse-and-upload-onboarding-ssl-button" style=""> BROWSE & UPLOAD </button> <input id="js-cert-file" class="hidden btn btn-ob" ...
Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...
I've been trying to figure out how to achieve the following for a while now. I know I can solve this issue by using different h1 tags and positioning them separately, but I'm curious to find out if there's a way to do it without dividing the ...
It's driving me a bit crazy as I'm not sure where I've gone wrong. I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to l ...
Encountering a peculiar problem where a page displaying a grid of boxes is experiencing issues in Safari, Chrome on iPhone 11 Pro, iPhone 13 Pro, and Chrome on Pixel 4a. Other devices are not affected. Symptoms include unresponsiveness and blank sections a ...