CODEWITHSUNDEEP
htmlcss
Ray
Ray

Reputation: 884

Is it legal to use multiple + (plus) operators in one class?

Im currently coding a responsive design and I am at the point where the navigation is to collapse for mobile.

To achieve this I have created two divs and an ul. The ul contains my nav elements while the divs are going to display nav images for a drop down with mobile and tablet.

HTML

<div id="nav-tablet"><img></div>
<div id="nav-mobile"><img></div>
<ul></ul>

CSS

#nav-tablet:hover + div + ul {
    display:inline;;
}

I've tested in and it works. I wanted to validate that it is valid CSS.

Upvotes: 3

Views: 897

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324760

Absolutely. It's just as valid as table>tbody>tr>td - there's no limit to the number of combinators.

Just be aware that + can be a bit slower to process than other combinators, so don't overuse it.

Upvotes: 1

Ry-
Ry-

Reputation: 225115

Yes, it's completely valid. You can use as many +s as you like. (Or  , or >, or ~ for that matter.)

If you do just want to match any ul after #nav-tablet:hover, though, ~ does that nicely.

#nav-tablet:hover ~ ul

Upvotes: 4

Related Questions