When you add 1 class behind another class, what does that mean?

HTML & CSS
1

When you add 1 class behind another class, what does that signify?

Example:

What is this saying?

What am I saying by doing this?

.wrapa .play ,
.wrapa .pause

 .wrapa .lines::before,
.wrapa .lines::after {


.wrapa {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapa .play ,
.wrapa .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}


.wrapa .lines::before,
.wrapa .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrapa .lines::after {
  left: 399px;
}

Would I be right in saying that, it acts as a container?

or, like as an identifier?

So, like if there are 2 of these:

That’s a way in how they are able to tell each other apart.

.wrapa .play ,
.wrapa .pause

.wrapb .play ,
.wrapb .pause
2

This has been explained many times to you and in quite some depth (even very recently by 2 or three members).

They are called descendant selectors (or combinators) and are lesson 1 in learning CSS. This is the first thing that you would learn before you can harness CSS properly.

A good read here also.

The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

2 Likes
3

The first one is the parent. The one next to it are the children

.parent .children

4

There are a set of style rules for . wrapa
There are a set of style rules for .play
When an object with class .play is located inside an object with class .wrapa, then these extra rules given under

.wrapa .play {} now apply.
eg <div class="wrapa">some text perhaps and <img class="play" ...>.....other stuff </div>

An example might be to give particular images inside a particular div rounded corners and a shadow, leaving different rules everywhere else. So .header .imgmain {} could have different rules than .sidebar .imgmain {}, and all other images would be left alone.

When it says .wrapa .play, .wrapa .pause {} these rules apply to both a .play and a .pause inside .wrapa

So for example .header .imgmain , .sidebar .imgmain {} would both get the same styles. but .imgmain elsewhere could have different styles

Style rules for the internal object in its own .imgmain{} still apply unless they are quoted with some difference in the .header .imgmain {} set of styles.

So you could have different rounding of the corners in one set of rules to the other, but same shadows.

2 Likes
5

It gets very tiresome constantly answering the same questions.

Class name active/activated placement - #37 by TechnoBear

5 Likes
6

Yes that thread goes into specific detail about this very question and was clearly a waste of time :frowning: (I think I’ve turned into a grumpy old man today)

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.