Margin-top sub html but active parent html

The parent 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

5, is a special selector invented by Sass that’s used in to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.

SCSS Syntax

.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;
  }
}

Sass Syntax

.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

CSS Output

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

⚠️ Heads up!

Because the parent selector could be replaced by a type selector like

.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

6, it’s only allowed at the beginning of compound selectors where a type selector would also be allowed. For example,

.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

7 is not allowed.

We’re looking into loosening this restriction, though. If you’d like to help make that happen, check out this GitHub issue.

Adding Suffixes

You can also use the parent selector to add extra suffixes to the outer selector. This is particularly useful when using a methodology like BEM that uses highly structured class names. As long as the outer selector ends with an alphanumeric name (like class, ID, and element selectors), you can use the parent selector to append additional text.

SCSS Syntax

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: 
# f4f4f4;
  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
    &--open {
      display: block;
    }
  }
}

Sass Syntax

.accordion
  max-width: 600px
  margin: 4rem auto
  width: 90%
  font-family: "Raleway", sans-serif
  background: 
# f4f4f4
  &__copy
    display: none
    padding: 1rem 1.5rem 2rem 1.5rem
    color: gray
    line-height: 1.6
    font-size: 14px
    font-weight: 500
    &--open
      display: block

CSS Output

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: 
# f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

In SassScript

The parent selector can also be used within SassScript. It’s a special expression that returns the current parent selector in the same format used by : a comma-separated list (the selector list) that contains space-separated lists (the complex selectors) that contain unquoted strings (the compound selectors).

SCSS Syntax

.main aside:hover,
.sidebar p {
  parent-selector: &;
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))
}

Sass Syntax

.main aside:hover,
.sidebar p
  parent-selector: &
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))

CSS Output

.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}

If the

.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

5 expression is used outside any style rules, it returns

.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

9. Since

.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

9 is , this means you can easily use it to determine whether a mixin is being called in a style rule or not.

SCSS Syntax

@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(
# fff, 0.75);
  }
}
@include app-background(
# 036);
.sidebar {
  @include app-background(
# c6538c);
}

Sass Syntax

.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

0

CSS Output

.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

1

Advanced Nesting

You can use

.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

5 as a normal SassScript expression, which means you can pass it to functions or include it in interpolation—even in other selectors! Using it in combination with and the

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

2 rule allows you to nest selectors in very powerful ways.

For example, suppose you want to write a selector that matches the outer selector and an element selector. You could write a mixin like this one that uses the to combine

.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

5 with a user’s selector.

SCSS Syntax

.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

2

Sass Syntax

.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

3

CSS Output

.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

4

⚠️ Heads up!

When Sass is nesting selectors, it doesn’t know what interpolation was used to generate them. This means it will automatically add the outer selector to the inner selector even if you used

.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

5 as a SassScript expression. That’s why you need to explicitly use the

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

2 rule to tell Sass not to include the outer selector.

Does margin

Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.

How do I ignore parent padding?

In CSS, you can ignore parent padding by using the `box-sizing` property. By default, the `box-sizing` property is set to `content-box`, which means that the size of an element's box is determined by its content, padding, and border.

Why are my margins not working in HTML?

It is because the elements are inline elements. If you set them to inline-block (or block) the margin will work as expected.

How do I set the top margin in HTML?

Style marginTop Property.

Set the top margin of a