Help with CSS Code

Report · Apr 08, 2022

Hello
I came across some css code and I need help in understanding it.
I found the code here: https://www.quackit.com/css/flexbox/tutorial/create_a_responsive_flexbox_layout.cfm

What does the arrow mean? #main > article {
Also what does this mean? order: -1;
Also the media query section:
#main > nav,
#main > aside {
flex: 0 0 20vw;
---------------------------

#main > article {
flex: 1;
background: #ffffdf;
}
#main > nav,
#main > aside {
background: #e9e9e9;
}

#main > nav {
order: -1;
}

<!doctype html>
<title>Example</title>
<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    box-sizing: border-box;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
}

#main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#main > article {
    flex: 1;
      background: #ffffdf;
}
#main > nav,
#main > aside {
    background: #e9e9e9;
}

#main > nav {
    order: -1;
}

header {
    background: #ffa07a;
    height: 15vh;
}

footer {
    background: #2f97ff;
    height: 10vh;
}

h1 {
font-size: 3.0em;
font-weight: bold;
margin: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
color: #ffffd9;
font-family: Georgia, serif, serif;
text-shadow: 2px 1.5px 3px #000000;
}

p {
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #14110e;
line-height: 1.3em;
text-align: left;
margin: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
word-wrap: break-word;
}

@media screen and (min-width: 576px) {
    #main {
        flex-direction: row;
    }
    #main > nav,
    #main > aside {
        flex: 0 0 20vw;
    }
}

</style>

<body>
<header><h1>Header</h1>
</header>

<div id="main">

<article><p>Article</p>
</article>

<nav><p>Nav</p>
</nav>

<aside><p>Aside</p>
</aside>
</div>

<footer><p>Footer</p>
</footer>

</body>
</html>

Report · Apr 09, 2022

The arrow selector will apply the styling to any child element within its parent element.

In the example below only the child span text of the wrapper will be red. The span text within the child span won't be affected.

.wrapper > span {

color: red;

}

<span>

Some text in child span

</span>

</div>

Whereas if you did;

.wrapper span {

color: red;

}

All text within span tags in the wrapper would be red.

order: -1;

That just reorders the position of where an element appears in mobile or desktop devices

Report · Apr 09, 2022

in fact the answer of @osgood_ is well seen, but it will not work because the second SPAN is itself encapsulated in its parent, the first SPAN, so it will inherit the color of this one. and wont demonstrate the purpose

in fact the > operator indicates the very first level of encapsulation,

so in the example below, only the first two P direct childs of BODY will be affected...

the third P being itself child of DIV and thus not first child of BODY will not be affected

<style>
   body > p {
      color:red;
   }
</style>
<body>
    <p>first</p>
    <p>second</p>
    <div>
        <p>third</p>
    </div>
</body>

concerning ORDER, I will add that the negative sign allows to regress the order below 1 thus accentuates the priority

https://developer.mozilla.org/en-US/docs/Web/CSS/order

concerning the media request, I suppose you are referring to the description

flex : 0 0 20vw

the three parameters stands for

flex-grow,
flex-shrink
flex-basis

you will get a clear description there https://css-tricks.com/snippets/css/a-guide-to-flexbox/

if that is the vw unit that cause your question, it is a relative unit

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

chapter Relative length units

Report · Apr 09, 2022

in fact the answer of @osgood_ is well seen, but it will not work because the second SPAN is itself encapsulated in its parent, the first SPAN, so it will inherit the color of this one. and wont demonstrate the purpose

By @L e n a

Good catch. I should have tested before I posted. I'm obviously losing it now I'm not involved with web-development so much these days!!!

Report · Apr 09, 2022

In fact, I would have made the same mistake as you and while reading your answer, I suddenly clicked on the inheritance, which made me realize that it could not demonstrate the concept 😉

Report · Apr 09, 2022

This is a Dreamweaver product forum. For code reference, I urge you to add these sites to your browser bookmarks.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 09, 2022

it's cool to repeat the links indicated by @L e n a

Report · Apr 10, 2022

Thanks for the help.

What is agravating is the many ways to do the same thing and those trying to help at various websites use different ways to display the same layout.

I found this at the CSS-Tricks> Guides site and it is pretty straight forward and makes sense to me for the most part where as the original post from me, that person used code unfamiliar to me such as " #main > article { "

Simple layout that I understand for the most part using @media all and (min-width:

https://codepen.io/chriscoyier/pen/vWEMWw

From this article:

A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Report · Apr 10, 2022

I understand your dismay. It's true that CSS has been rapidly expanding over the past few years, and I don't see it slowing down. And this is desirable.

As you noted, there are multiple ways to achieve visually the same result. In fact, each of these features really provides a solution for a specific context. But, in the same time that allow us to take a variety of paths.
As an example, to get the same layout you want to get, you can also use GRID. Anyway, GRID is a principle that you should have a look to.

To have an idea https://css-tricks.com/getting-started-css-grid/
To go further https://css-tricks.com/snippets/css/complete-guide-grid/

Concerning display layout :

More recent method https://caniuse.com/?search=Grid
Older method https://caniuse.com/?search=flex

Report · Apr 10, 2022

Thanks again : )

CSS Grid Layout Generator. Click on the page layout button on the right side then hover your cursor over the grid then click on the arrows and the + to add or subtract the columns and rows. You see the code below at the site. Quick layout.
https://angrytools.com/css-grid

Report · Apr 10, 2022

Thanks for the help.
What is agravating is the many ways to do the same thing and those trying to help at various websites use different ways to display the same layout.

By @davidhelp

That is the fundamental problem with web-development today, there is NO specific path to follow. As such it creates many problems and many arguments between developers themselves. Its getting worse, especially over the last 5/6 years. I wouldn't want to be staring out today, its a road to nowhere fast. Back in the day, when it was sane, there were less choices and less options, which meant a clearer path to take, sure there were always debates but nothing on the scale of today.

My advice is just find a route which suits yourself, you understand and forget all the noise.

Report · Apr 10, 2022

"My advice is just find a route which suits yourself, you understand and forget all the noise."

I will forget all the noise : )

Report · Apr 10, 2022

yes you're right, in fact, since a few years already, the democratization, and especially the multiplication, of the device and web browsing habits have shaken our approaches of page-display, so all these new tools came to supplement our panoply according to these new needs