Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap Basics Responsive Layouts With the Bootstrap Grid Reordering and Offsetting Columns

Chris Komaroff
PLUS
Chris Komaroff
Courses Plus Student 13,672 Points

Can anyone explain order of precedence for CSS used to hide image for extra small (xs)?

Assumed d-none was overridden by d-sm-block for devices larger than xs. But I notice the order does not seem to matter.

Guil does this in video:

<img class="mb-4 img-fluid rounded d-none d-sm-block " src="img/pdx.jpg" alt="Portland">

I notice this also hides <img>

<img class="mb-4 img-fluid rounded d-sm-block d-none" src="img/pdx.jpg" alt="Portland">

i.e. put d-sm-block before d-none and it works exactly the same.

I like Guil's way better as it looks like normal CSS order of precedence, but that is not true, so I guess d-*-block always overrides d-done.

2 Answers

Steven Parker
Steven Parker
211,044 Points

CSS does not assign a precedence to class names based on the order they appear in an element's class list.

But what will make a difference is the order in which the rules pertaining to the classes appear in the CSS file(s).

Chris Komaroff
PLUS
Chris Komaroff
Courses Plus Student 13,672 Points

Steven, thank you, makes sense. Order of classes in class attribute does not matter. Then class="d-none d-sm-block" is same as class="d-sm-block d-none". Instead this "d-sm-block" higher precedence must come from the CSS in bootstrap.

I just read the bootstrap docs more carefully. Docs on display utilities defines this behavior (https://getbootstrap.com/docs/4.0/utilities/display/):

" ... To show an element only on a given interval of screen sizes you can combine one .d--none class with a .d--* class, for example .d-none.d-md-block.d-xl-none will hide the element for all screen sizes except on medium and large devices. ... "

So .d-none always gets overridden by the other display properties, or at least by .d--