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>My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...
I have three different divisions that I would like to showcase as table cells: <div class="field"> <div class="row"> <label for="name">Subdomain</label> <input type="text" id="name" name="name"> &l ...
I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...
Is there a way to replace text at the bottom right of the window, as opposed to the page, so that it remains fixed in the corner of the window? I'm looking to create a "share" link that is always visible. ...
Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...
Is there a way to dynamically update a progress bar in HTML while a function is running? function fillProgressBar() { var totalIterations = 100; for (var i = 1; i <= totalIterations; i++) { //perform calculations progressBarWidth = (i/to ...
Everything seems to be in order: background-image: url(./dir/img.jpg); However, I encounter a 404 error when attempting to reference an image using this approach: index.html <div style="--url: url(./dir/img.jpg);"></div> css backg ...
I'm currently learning the process of constructing a website. I've successfully constructed the index page, and below you will find the PHP and HTML code: <?php session_start(); $pngFiles = array('image1.png', 'image2.jpeg' ...
I recently noticed an issue with my website, which is built using Bootstrap. The problem arises when users scroll down the page and encounter the fixed navigation menu. It appears that the menu items and logo are no longer contained within the designated ...
My HTML file has a structure similar to the following: <div style="float:right"> A line of text, floating to the right </div> <div style="text-align:center"> And here, several lines of<br /> text which should be centered. </div& ...
I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...
I have a set of three divs. One contains a Twitter icon, another holds a LinkedIn icon, and the last one is designated for displaying text upon clicking. My goal is to click on the Twitter icon and have corresponding text appear in the third div. Then, if ...
<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...
One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...
I'm seeking clarification on the topic at hand. Why am I unable to simply use the following code: <div style="min-height: 100vh"> <div style="height: 100%"> </div> </div> When I implement this code, ...
Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...
I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet: class SignUpForm extends React.Component { render() { return ( <Button sx={{ justifyContent: "flex-end" }} colo ...
My goal is to trigger the display of a modal when a button is clicked. The modal should be shown by clicking this button: <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1 ...
I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...
My issue relates to using swiperJS with multiple images, as I'm struggling to make it take the full width and height of the containing div. Despite applying styling like this to my images: .swiper-slide img { width: 100%; height: 1 ...