Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Danya Smith
Danya Smith
1,854 Points

How would you use the Lobotomized Owl selector featured in issue 406 of A List Apart?

I just read this article in A List Apart: For People who Make Websites:

http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

It discusses an adjacent selector that can be used to streamline CSS, reducing bloat and complexity:

* + * { }

In my early web education, I remember reading warnings against using the universal selector and I have rarely relied on it. I'm rethinking this.

The main example used in this article is normalizing margins:

* + * { margin-top: 1.5em; }

I'm thinking about other uses for this convention and wondering what fellow Treehouse members think about it. How would you use this?

Jon Benson
Jon Benson
12,168 Points

Thanks Danya,

I'm going to play around on my site to see how it plays out. I too rarely use the universal, but I love to experiment. I'll check in if I have anything worthwhile to say! All the best. Jon

2 Answers

Danya Smith
Danya Smith
1,854 Points
Danya Smith
Danya Smith
1,854 Points

Hi John...

To create some sample code to examine this, you might try the following:

Create a generic HTML page (if you don't already have one) that includes all of the basic HTML elements that surface content: paragraphs, lists, tables, block quotes, headings, etc. You can quickly put something together using code snippets from http://html-ipsum.com/

Then, create and link your stylesheet and play with the adjacent selector (+). You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

You might include declarations like

p + p {

}

h1 + p {

}

ul + li {

}

Within these declarations, experiment... Change margins, padding, colors, etc.

Then test out the universal selector. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors 

* {

}

Then try out this proposed lobotomized owl selector, add a few properties and compare to previous results.

* + * {

}

If you are really new to CSS or could use a refresher on selectors, check out the CSS Foundations course which goes through this and more in great detail.

Quicken Loans
Quicken Loans
12,654 Points
Quicken Loans
Quicken Loans
12,654 Points

BUMP!

As a beginner some examples would really help me understand this article