Need Assistance with Class Syntax in HTML-CSS

HTML-CSS
1

This question stems from a Traversy Media tutorial I did on YouTube. I copy/pasted the relevant code into a CodePen link below. I also just copy/pasted the question I asked directly on the video beneath this paragraph.You guys are 50x more helpful than YouTube commenters! I’m not understanding the syntax he used. I have not seen it before and I can’t find a good explanation using Google. Definitely super simple, but it clashes with what I already know/think I know. Thanks in advance!

"Question:

I’m not understanding where these specific classes in CSS are coming from? In the HTML, we have the classes “container”, “split left”, “split right” and “button”. In the CSS these are broken apart and added together in ways I’ve never seen syntactically before. For example: “.split.right .button”, “.split”, “.split.left”. Shouldn’t a class written with a space in HTML like “split left” become .split-left in CSS? Likewise, there is no class .split in the HTML, only “split left” and “split right”.

Any help on this would be huge, as I am trying to really study the completed project and wrap my head around the individual parts!"

https://codepen.io/trwexler/pen/LKRQgV

2

Hey there,

.class1 .class2 matches any elements of class .class2 that are descendants of another element with the class .class1 .

<div class="name1">
    <div class="name2">
        ...
    </div>
</div>

.class1.class2 matches any element with both classes.

<div class="name1 name2">...</div>

I hope this helps.

1 Like
3

Hey thanks for answering.

In the given example, only “container” is a parent of “split left” and “split right”. He has split right in html then has separate classes not in the html, like .split and .split.right in his css.

.split is never in html or alone in the js either. The closest thing is the above example of class=" split right". How is that able to become a stand-alone class in CSS?

As i research more now, is writing that in html two separate classes since there is a space? I think that may be what it is and the source of my confusion. What do you think?

4

I see what you are saying.

.split has the common attributes between split.left and split.right to avoid redundancy.

so instead of having:

        position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;

in both .split.right and .split.left
so .split.right takes all the attributes from .split and add it to .split.right
same for .split.left

to visualize what i am saying , change width:50% in .split to width:20% and see how both left and right width changes on the website

.split {
	position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;
1 Like
5

Yes, so writing class= “split left” with a space in between effectively creates two separate classes, right? That makes both .split and .left its own class rather than a single split left class. The single class would have to be written as class=“split-left”.

6

Correct!
in css you define a class called split-left as .split-left and in html you call it using class=“split-left”

if you have two classes, class split and class left you define in css as

.split {

}

.left{

}

and in html you call these two classes using class = “split left” if you want to apply both classes to your element.

1 Like
7

Excellent. That makes total sense. Thanks for helping me work through this!

1 Like