What are the distinctions between the OL > LI:only-child and !OL > LI:only-child CSS Selector 4?

Let's take a closer look at these two unique selector examples. In the first scenario, we have an ordered list OL containing a single list item LI:

OL > LI:only-child

Now, let's consider the second example where we have an ordered list OL that is itself a unique child, with the only child being a list item LI:

!OL > LI:only-child

Although the tree structures represented by these selectors are identical, the focus of each selector differs due to their subjects.

I might need some clarification on this distinction. Could you provide me with an example for better understanding?

Answer №1

The source of the example you provided is referenced from the W3C's draft.

A key distinction lies in the element targeted by the rule.

In the initial scenario, it targets the LI, as the default behavior applies to the last element of the selector.

However, in the second case, the target shifts to the OL, since it contains the !.

If you have the following style :

!OL > LI:only-child {
   background: yellow;
}

then the yellow background will be applied to the entire OL element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

Calculating the total number of records in a MySQL database using PHP can be achieved by

I need help with counting all rows in a dataset and displaying the number as part of a small statistic later on. Currently, I'm facing an issue where my PHP code is not returning the correct number of rows. The HTML echo works fine when displaying te ...

Collapsing tabs feature in Bootstrap 4

I am working on a project with Bootstrap 4 Tab. My goal is to initially hide all tab contents and then show them when the corresponding tab is clicked. I achieved this by removing the active class from the tab-pane div. However, I encountered an issue wher ...

Displaying modal popups limited to one per session

Is there a way to display this Dialog Popup only once per session? I have looked into using cookies for configuration, but haven't been able to implement it in this scenario: $(document).ready(function() { ShowDialog(true); e. ...

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

Avoiding HTML Encoded Characters when sending button or form submissions

When a user clicks a button that uses the GET method, I need to send multiple values at once. To achieve this, I am using an argument in the following way: $argument='var2=value2&var3=value3'; echo "<button value='value1&$argument ...

Incorporate anchor or data-filter into the URL for better functionality

Is there a way to set up a button in a menu that sorts items listed below it? For example, let's say the button is labeled "news". Using the data-filter attribute or another method of identification, can I navigate to a specific page with this button ...

Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...

Selecting radio buttons in IE11 using JQuery

The code snippet below is used for handling form submission: $(".submitButton").click(function(event){ if ($(this).hasClass("disabled")){ event.preventDefault(); return false; } if (!$(this).hasClass("disabled")){ $('.invoice-form&a ...

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

Discover the secrets to achieving complete customization of your data table's appearance using the DevExtreme React Grid in conjunction with material-ui

I am facing difficulties in styling the DevExtreme React Grid, which I found from their documentation here. Here is the sample code that I copied from another repository. I have a few questions: How can I have complete control over the styling? I noti ...

Button-controlled animations in Angular

Exploring the ins and outs of angularjs is a new journey for me. As I navigate through learning how the framework operates, I encountered an interesting challenge. I crafted a script to toggle a message display with a button, all while attempting to incorp ...

Problems arising from navigating between rtl and ltr modes on Internet Explorer 7

I have created a basic sliding animation for a div (developed from scratch without third-party plugins) that works well in IE10, FF, and Chrome, but has issues in IE 7. It still works in IE 8 though. HTML <div class="aboutus"> <div class="ma ...

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

Execute a JavaScript function when a form is submitted

Seeking to reacquaint myself with Javascript, encountering difficulties with this fundamental issue. https://jsfiddle.net/gfitzpatrick2/aw27toyv/3/ var name = document.getElementById("name"); function validate() { alert("Your name is " +name); } < ...

"Prominent logo displayed at the center of the navigation bar with links fl

My goal is to achieve a navbar layout similar to this: https://i.sstatic.net/4LYcI.png However, my current navbar looks like this: https://i.sstatic.net/1PDHR.png I am working with Bootstrap 5 and I want the navbar links to be positioned on either side o ...

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

The alignment of text in the btn-check label of Bootstrap is not centered

My checkboxes with btn-check have labels of varying lengths. I want all the labels to be aligned in the middle, but I can't figure out how to do it. The screenshot below illustrates the issue with the first checkbox. The content is not centered in the ...

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...

Tips for fixing the issue of disappearing top margins in elements while using CSS3 Pie in Internet Explorer 7

Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...