CSS: Select element only if a later sibling exists

by

A neat little trick

You can achieve what you want by using a trick to check if the <section> element is the only element in <main>. This will not work, if there are any other elements there. In your case it should work like this (http://jsfiddle.net/Ljm323qb/2/): 

section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

As illustrated in this codepen: http://codepen.io/omarjuvera/pen/ByXGyK?editors=110

General stuff on Sibling Selectors

There’s the + selector which would select a sibling that comes right after the element (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)

And there’s the ~ selector which selects all following siblings (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)

You could achieve it by putting the <aside> element before the <section> element and using a sibling selector.

Here’s an example: http://jsfiddle.net/Ljm323qb/1/

A quick look in the future
Soon this will be possible, with a new :has pseudo class (http://dev.w3.org/csswg/selectors-4/#relational)
You’ll be able to call something like main:has(> aside) > section { ... } but we’ll have to wait for that, unfortunately 🙁

More Related Contents:

  1. Can I have an element with an ID that starts with a number?
  2. How to get nth-child selector to skip hidden divs [duplicate]
  3. How to select nth line of text (CSS/JS)
  4. jQuery vs document.querySelectorAll
  5. Are data attribute css selectors faster than class selectors?
  6. How to create a collapsing tree table in html/css/js?
  7. Hover over image to get a box with multiple links in html/JavaScript
  8. Reloading a single div in an html page [closed]
  9. How do you inject this code into HTML using Javascript?
  10. How to create blog posts with HTML and CSS? [closed]
  11. fixing slider on my website [closed]
  12. Full-screen iframe with a height of 100%
  13. How To Get Font Size in HTML
  14. Simulation background-size: cover in canvas
  15. How to Increase browser zoom level on page load?
  16. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  17. execCommand() is now obsolete, what’s the alternative?
  18. How to create a custom scrollbar on a div (Facebook style)
  19. Multicolor Text Highlighting in a Textarea or Text Input
  20. HTML book-like pagination
  21. Creating a select box with a search option
  22. Passing mouse clicks through an overlaying element
  23. How to make text over flow into two columns automatically
  24. How to resize Twitter Bootstrap modal dynamically based on the content
  25. Wait cursor over entire html page
  26. Retain scrollbar position even after reloading using javascript
  27. jQuery Popup Bubble/Tooltip [closed]
  28. How do I make a div full screen?
  29. Best way to do a split pane in HTML [closed]
  30. Is there a javascript equivalent to using @media query? [duplicate]

Leave a Comment