sass parent selector code example

Example 1: css parent selector

/* There is no such selector
   in 2008, the following was suggested */

a < img { 'border': none }

/* Which in theory, would set an an images 'a' parent
   border to none
   Of course, this does not exist

   Another suggestion... */

div:parent { 'border': none }

/* Pretty self explainatory, nevertheless it does not
   exist.

   You will have to use JavaScript/jQuery */

$('some-element').parent();

Example 2: sass & selector

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}