Apply style to parent if it has child with css

Question

I m trying to apply styles to the parent if it has child elements   So far  I ve applied styles to the child elements if present  But I want to style the parent if the parent has child  using ONLY CSS   following is the html   lt ul class  main  gt       lt li gt aaaa lt  li gt       lt li gt aaaa lt  li gt       lt li gt aaaa lt  li gt       lt li gt aaaa lt  li gt       lt li gt aaaa          lt ul class  sub  gt               lt li gt bbbb lt  li gt               lt li gt bbbb                  lt ul gt                       lt li gt cccc lt  li gt                       lt li gt cccc lt  li gt                       lt li gt cccc lt  li gt                   lt  ul gt               lt  li gt               lt li gt bbbb lt  li gt               lt li gt bbbb lt  li gt               lt li gt bbbb lt  li gt           lt  ul gt       lt  li gt       lt li gt aaaa lt  li gt       lt li gt aaaa lt  li gt       lt li gt aaaa lt  li gt   lt  ul gt    the css code          margin 0      padding 0      text-decoration none     main li       display inline-block      background yellow      color green     main  gt  li  gt  ul  gt  li       background orange    main  gt  li  gt  ul  gt  li  gt  ul  gt li       background pink      working FIDDLE

User · Accepted Answer

It s not possible with CSS3  There is a proposed CSS4 selector     to do just that  which could look like this  Selecting the li element    ul  li ul sub           See the list of CSS4 Selectors here   As an alternative  with jQuery  a one-liner you could make use of would be this      ul li has ul sub    addClass  has sub      You could then go ahead and style the li has sub in your CSS

[html] Apply style to parent if it has child with css

Examples related to html

Examples related to css