CSS is my kryptonite. A project I completed for Holberton School a few months back limited us to using only raw CSS. It left me feeling very much like Peter Griffin here but with a lot more expletives thrown in.
After listening to this talk by UX designer Colby Fayock, I decided to get out of my comfort zone and dive back into the world of raw CSS. Maybe it was because I was less stressed since I didn’t have a deadline, recovered from the bumps and bruises from that earlier project, or I learned something having gone through that experience. This time my CSS experience wasn’t that bad. I was able to build a portfolio site using only HTML and CSS without too much frustration (or swearing like a sailor).
This past week, I started on an advanced CSS project. I thought I had an understanding of how to use CSS combinators and was kind of right and kind of wrong. Here is a little of what I learned.
I will specifically talk about the descendent and child combinators and try to answer the question in the caption above. I also want to touch on multiple class selector syntax since I was confused by how similar it is to the descendent combinator syntax. As you can see below, we’ll start with a parent class and a child class. One is styled with red text the other blue. In the examples below, we will limit ourselves to only use class attributes in our HTML.
That was simple enough. Now let’s add another element and style it with purple text.
Multiple class declaration
One way we can do this is to give the new element both class attribute values of “parent” and “child”
<div class=“parent child”>
In the CSS declaration, you can see there is no space between
.parent.child What this means is I want to select any element that contains both the parent and child class. As you can see in the HTML above, the element with text “Both classes” have both the parent and child values
<div class=“parent child”>. The other two elements have only one of those class values.
Now the element with text “Child” wants to be purple too. I could do the same thing as I did above and add the class value of parent to the div but here is a different way.
What changed? Except for the text inside the div with class value child, the HTML stays the same. Take a look at the CSS declaration and you’ll see
.parent .child now contains a space. In this case, the space is CSS syntax for descendent combinator. We have an element
<div class=”parent”> with class attribute value of parent. Any descendent of this parent element that has
class=”child” will be purple. That’s why the element containing the text “Both classes” is also purple:
<div class=”parent child”>
The descendent combinator syntax is an easy way to reach all descendants no matter how far they are nested from the parent element. The elements with text “Grandchild” and “Descendent” both contain the value of child in the class so they too are purple. Now, the element with text “Grandchild” wants to be different. Is there a way to give it a different color while keeping the others purple?
This was a little trickier than I expected but the answer is, yes! In order to do this, we need to use
>, the child combinator in CSS.
.parent > .descendent says for elements with the class value of parent, the direct children with the class value of descendent will be green. In the HTML above, the first two elements (“Child is purple” and “Both classes”) of the original parent class remain purple because they do not have a class value of descendent. The element with text “Both classes” has a class value of parent, so the direct child with the class value of descendent, the text “Grandchild” is styled green.
Why isn’t the text “Descendent” green? If you look at the HTML, the element with text “Descendent” is wrapped inside another <div> element. This means it is not a direct child so will not be green. We haven’t written a CSS declaration for the class value of descendent so no styling takes place at the class level. “Descendent” is not red nor the default black. It is purple. This is because of the way elements inherit styles. Pulling up developer tools tells us this.
CSS syntax is a little funky but experimenting with it has helped me understand it more and hate it less. Feel free to do the same with the examples I gave above. There are a lot of ways to achieve what was done here.
I leave you with this question. What do you think this will do?
.parent > .child > .descendent Even though we could have done things this way, why wouldn’t we?
Thanks for hanging in there with me until the end.