All geek questions in one place

Best way to select child menu item selector in CSS

I found this amazing resource http://gtmetrix.com/ , which you indicated on the website, and it gives you a performance report and gives you estimates of what you can save by compressing and optimizing different things.

It even does most of this for you, it optimized all my images, css and javascript files, showed me css that is not used on the current page, it also shows a list of inefficient CSS selectors and shows the selector and line number in which it is included in your css file.

Here is one of the results for me that I use for the navigation menu

ul#menu-navigation li>ul li a Tag key with three descendant selectors and an identifier too qualified with the tag
ul#menu-navigation li>ul li a:hover Tag key with three descendant selectors and identifier, too qualified tag

So my question is: is there a better way to make a UL list menu that has submenu items?

+4
source share
3 answers

Firstly, you do not need ul before the identifier, because the identifier is quite unique, but it can be readable by you, etc.

Of course, you can remove >ul , but I assume that you added it knowingly to be specific, and in CSS it is “safer” (although “better” can be said) to be more specific than general.

Then, if you don't change your markup (with an extra class or so), I think this is the right way. There is redundancy, and I completely agree. This is an inherited issue in CSS. You cannot solve this with CSS. Are you living with him or looking for something that does not pose a problem for creating CSS for you.

In my current project I use LESS CSS, this syntax is very similar to CSS and generates actual CSS files via the command line (or Visual Studio extension, well, LessExtension, which is generated when saving), The browser also has a JS file to generate.

Check this. I bet you will like it. You can take your CSS file as is and start adding benefits.

http://lesscss.org

You have selected the following in LESS:

 #menu-navigation { li>ul li a { /* some Anchor styles */ &:hover { /* some Anchor hover styles */ } } }

Of course, you can also have an average nesting level. Here I did all li>ul li a single selector instead of several nesting levels for simplicity, but usually I made each of them a nesting level.

+2
source

It seems like they just want you to reduce the number of child selectors that you use. Therefore, indicate the class on the lower level element

 ul.submenu li a { } li.submenu a {} a.submenu {}
+1
source

Since your css is for the anchor tag. Your selector can be turned off until

  • Generic Annor #menu-navigation li a
  • Specified anchor inside the list #menu-navigation li > ul li a
+1
source

Source: https://habr.com/ru/post/1390950/

More articles:


All Articles