Which one should I use? (Need opinions) CSS class

Question

I have the options to choose between those CSS classes:

.container> div > table.Test> tbody > .header

And

.header

to add some CSS styling.

What I would like to know about this is:

1. What is the main difference?

2. Which do you prefer to use, and why?

3. Is there a different in performance between those two?

Thanks.

Answer 1

First of all, the question doesnt make any sense.

Explanation:

1.What is the main difference?

div#container > ul 
{
  border: 1px solid black;
}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

 <div id="container">
   <ul>
   <li> List Item
    <ul>
       <li> Child </li>
    </ul>
  </li>
  <li> List Item </li>
  <li> List Item </li>
  <li> List Item </li>

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.

 .header
 {
 }

It will target all the elements with the class header.

 #container > div > .header
 {
 }

It will target all header elements which is directly placed under the divs which are directly placed under #container.

2.Which do you prefer to use, and why?

It mainly depends on your need. If you want to target all header elements[i.e There may be many tables with same class .header] If you want to apply styles to all the headers, you can use second way. Else use first way.

3.Performance

I am not sure. I don't find any performance issues.