0

I'm new to CSS and as I've been watching a tutorial and following along I've stumbled across one particular part of CSS syntax I didn't really understand and couldn't find an appropriate answer.

The header looks like this:

    <header>
        <div class="container">
            <div id="branding">
                <h1><span>Neher</span> Music</h1>
            </div>
            <nav>
                <ul>
                    <!-- list elements -->
                </ul>
            </nav>
        </div>
    </header>

And in the .css file I needed to refer to it like this, so that the navigation and the heading were in the same line:

header #branding{
  float: left;
}

header #branding h1{
  margin: 0;
}

As you may notice there is a space between element selector and id selector. I have found examples of such a thing with element and class selectors, however in these examples only the two selectors were swapped and the difference was explained.

This here seems a bit different (at least for me as I am - as I said - new to CSS). A bit later in the tutorial there was again some code where there was a combination of element and id selector, this time however I had to spell it without a space bar as otherwise it wouldn't have worked:

HTML-Part:

        <section id="main">
            <div class="container">
                <article id="main-col">
                    <h1 class="page-title">About Me</h1>
                    <p>Some Text</p>
                </article>

                <aside id="sidebar">
                    <div class="dark">
                        <h3>What I Do</h3>
                        <p>Some Text</p>
                    </div>
                </aside>
            </div>
        </section>

corresponding CSS-Part:

/* Sidebar */

aside#sidebar{
  float: right;
  width: 30%;
  margin-top: 10px;
}

/* Main-col */

article#main-col{
  float: left;
  width: 65%;
}

I would be really happy if someone explained me the difference of this a bit more as for me as a css-beginner it's not very logical what exactly is happening here.

Samaranth
  • 385
  • 3
  • 16
  • 1
    With space, you refer to a child element. Without space, it's the tag element with the id itself. In case 1 it is like : header div#branding – Shim-Sao Dec 08 '18 at 00:31
  • 1 : aside#sidebar or 2 : #sidebar. 1 : just the aside with the id sidebar will be impacted. 2 any tag with the id sidebar will be impacted. Space makes it possible to make a tree to point to an element or type of element according to its needs. – Shim-Sao Dec 08 '18 at 00:46

0 Answers0