jessicanduarte

[jessicanduarte]

My kind of patriotism...#gocanada2014

[jessicanduarte]

Ginger chews and coffee: essential tools for coding at @learninglabs_

[jessicanduarte]

And then there were two, burning the midnight oil. With @jana_hue at @learninglabs_

[jessicanduarte]

Feeling like 007 with my new Martian Watch and the glow of a super fun Wearable Wednesday Meetup! The advantages of staying late @learninglabs_ after class!

[jessicanduarte]

A classmate shared this link today and I can't wait to be able to do this! 

[jessicanduarte]

My new favourite coding nook at the Learning Lab!

[jessicanduarte]

The Essenth of CSS Specificity

It's been two days since I started the Full-Time Front-End Bootcamp at HackerYou, and already I feel completely at home in the new beautiful space they're creating at Learning Labs. And it's not just because the space is beautiful and the team is doing such a great job making us feel welcome. It's also because all my classmates are so uniquely amazing, and so willing to share experiences and engage in conversation. 

Since I just finished the Part-Time HTML&CSS course last December, I was expecting to be a little bit bored reviewing everything I just learned. But that's not the case at all! I'm learning something new every day. One really great thing they made us do yesterday was break into teams and work on a set of questions on CSS specificity. I partnered up with Jana, who did not take the part-time class last month. Surely enough, ten minutes into our discussion, Jana and I stumbled upon a conundrum. 

We were attempting to find two ways to select the first paragraph on a page and style it. Jana suggested we use the "nth-child" pseudo-selector. The second way we chose was giving the paragraph we were trying to target, a class. We popped up Sublime Text and created an HTML document to play around with the code. First we figured out how to select our first paragraph using the "nth-child" property. 

p:nth-child(1) {

color: red;

}

It worked! Our first paragraph showed up in red font. 

So then we added the class of "first" to our paragraph and ran the code again: 

.first {

color:green

}

What do you think happened? Did our paragraph come out green or red? (Well, take a look at it inside my codepen and see what happened) 

The nth-child property won out against the class! How could this be? Jana and I were convinced that a class would be more specific than the pseudo-selector "nth-child". What a revelation!  

So how could we make the selector with the class of "first" more specific than it is as written above, to win out against the "nth-child" property? 

It turns out if we just write the following, specifying that it's paragraphs with the class of first that we want to select, makes it specific enough to beat out the nth-child pseudo-selector. 

p.first {color:green}

Try it yourself in my codepen!  

Figuring out this simple problem was the perfect way for Jana and I to understand CSS specificity and how the nth-child pseudo-selector works. And learning in this self-guided way in a discussion means that  I will never forget, and that what I thought would be a boring redundant day actually turned out to be really fun!  

Oh, and lest I forget that I also used the "last-of-type" pseudo-selector yesterday to select the last image in a page. I totally missed "last-of-type" three months ago when I was first introduced to this concept! Pseudo-selectors are awesome! 

I finally feel ready to read this article which Wes posted months ago that completely overwhelmed me! 

What will Day 3 bring?