what’s the difference in using #my_div or div#my_div

Question

I wonder if there is any difference at the time of the styling of a page using div#minha_div or #minha_div, and another difference is influenced to put the whole path of the div that will be stylized for example #wrapper #topo #menu and what is the difference between them? and if there is any difference that also influences ? #wrapper #topo div#menu and another thing I wanted to know, is if you have any property that defines the height of the border-right or border-left

Answer 1

div#minha_div and #my_div

In the first case you are selecting a div that has the id #minhadiv. Ex.:

<div id="minha_div"></div>

In the second, you are selecting any element who owns the id #minhadiv, that need not necessarily be a div. Ex.:

<input id="minha_div">

#wrapper #top #menu

Here you are making a selection by hierarchy: the #menu is the son of #topo who is the son of #wrapper.

This form of selection is unnecessary in this case because as a id should be unique on the page, you can simply select only the #menu direct, not to mention your parents and grandparents.

This is usually done with classes or tags, because you may want to select a class or tag that you find in #menu but does not want to select one that exists elsewhere. Ex.:

#menu li{
   color: red;
}
#menu .ativo{
   font-weight: bold;
}

Edge height

The edge only owns the property border[-top|right|bottom|left]-width that is just the thickness. If you want to create a pseudo-edge to give an effect that the edges right or left have a "height" that is not normal, may resort to gambiarras pseudo-elements, such as ::before and ::after.

Answer 2

1 - I wonder if there is any difference in the time of styling a page using div#minha_div or #minha_div...

The difference is that when you put an HTML tag in front of the id or class it will only be executed through the tag. Example:

div#bgRed {
	background-color: red;
	padding: 30px;
}

#bgYellow {
	background-color: yellow;
	padding: 30px;
}

<div id="bgYellow" >
	Div 1 - Yellow
</div>

<div id="bgRed">
	Div 2 - Red
</div>

<p id="bgYellow"> Paragrafo 1 - Yellow</p>
<p id="bgRed"> Paragrafo 2 - Red</p>

Note that even the tag <p>paragraph 2 having the same id bgRed of div, only div has recovered the style. It is configured to be like this.

2 - and another difference if it influences to put the whole of the div that will be stylized for example #wrapper #topo #menu and the difference between them

This is important when you need to perform a specific style for this view. The difference is when your layout has menu within a topo who will be inside a wrapper this style will be executed. Note this example:

#wrapper, #topo, #menu {
	color: red;
}

#wrapper #topo #menu  {
	color: black;
}

<div id="wrapper" >
	wrapper
</div>

<div id="topo">
	topo
</div>

<div id="menu">
	menu
</div>

<div id="wrapper" >
	<div id="topo" >
		<div id="menu" >
			menu
		</div>
	</div>
</div>

<div id="menu">
	menu
</div>

The colors have been set in red for all Ivs, using ",". Then a specific style is inserted that will change the color only in that case. Note the menu when you are alone, ie forda of the other Divs, it recovers the previous configuration.

3 - another thing I wanted to know, is if you have any property that defines the height of the border-right or border-left

It doesn’t exist. But it can be done. See:

#wrapper {
	height: 100px;
	width: 100px;
	position: relative;
	xborder-bottom: 2px solid #f51c40;
	background: red;
}

#wrapper:after {
  content : "";
  position: absolute;
  right    : 0;
  z-index: 100;
  top  : 0;
  width  : 3px; /* aqui seria a largura da borda */
  height   : 50%; /* aqui é a altura da borda */
  background: #555;
}

<div id="wrapper" >
	wrapper
</div>