what's the difference in using #minha_div or div # minha_div

3

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

    
asked by anonymous 29.04.2018 / 21:40

2 answers

3
  

div # my_div and #minha_div

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

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

In the second, you are selecting any element that has id #minhadiv , which does not necessarily have to be div . Ex.:

<input id="minha_div">
  

#wrapper #topo #menu

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

This form of selection is unnecessary in this case because since a id must be unique on the page, you can simply select only #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 is in #menu but you do not want to select one that exists elsewhere. Ex.:

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

Edge Height

The border only has the border[-top|right|bottom|left]-width property, which is nothing more than the thickness. If you want to create a pseudo-border to give an effect that the right or left borders have a "height" other than normal, you can use gambiarras pseudo-elements, such as ::before and ::after .

    
29.04.2018 / 23:21
2

1 - I would like to know if there is any difference at 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>

Notice that even the <p> tag in paragraph 2 having the same id bgRed of div , only the div has regained the style. Because it is configured to be this way.

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

This is important when you need to run a specific style for this view. The difference is when your layout has menu inside a topo that will be within wrapper this style will be executed. Notice 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>

Colors have been set to red for all divs, using ",". Then you enter a specific style that will change the color only in that case.

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

Does not exist. But you can do it. 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>
    
29.04.2018 / 22:44