What is this content in Bootstrap for

Asked

Viewed 184 times

1

I’m using the Bootstrap version v3.0 and analyzing the file CSS, found that stretch:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

I would like to know, what is the use *.

In the current version of Bootstrap (3.3.4), he’s inside a @media Print{}, thus:

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

I wonder what that code is for?

twitter-bootstrap
  • 1

    * selects all elements. Your question is just that or is about the :before and :after also?

  • @Luke in the case, it’s only about the ? same.

  • @Lucas puts as answer p/question to be closed

1 answer

3


Long live!

The * symbol represents all elements of your HTML page.

For example, if you wanted to add a black backgroud to all elements of your HTML page you could use the following CSS:

* {
    background-color: #000;
}

The * symbol also allows you to select all elements within another element, for example:

div * {
    background-color: #000;
}

In the above example only the elements that were inside a div would be left with the black background.

Regarding your doubt about the workings of @print media {}, means that css is only applied when the page is in print preview mode.

You can see more about the various types of @media in the following link: https://developer.mozilla.org/pt-PT/docs/Web/CSS/@media

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.