3

gostaria de saber se tem alguma diferença na hora da estilização de uma página usando div#minha_div ou #minha_div, e outra diferença se influencia colocar o caminho todo da div que vai ser estilizada por exemplo #wrapper #topo #menu e qual a diferença entre elas ? e se tiver alguma diferença isso tambem influencia ? #wrapper #topo div#menu e outra coisa que eu queria saber, é se tem alguma propriedade que defina a altura do border-right ou border-left

2 Respostas 2

3

div#minha_div e #minha_div

No primeiro caso você está selecionando uma div que tem a id #minhadiv. Ex.:

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

No segundo, você está selecionando qualquer elemento que possua a id #minhadiv, que não precisa ser necessariamente uma div. Ex.:

<input id="minha_div">

#wrapper #topo #menu

Aqui você está fazendo uma seleção por hierarquia: o #menu é filho de #topo que é filho de #wrapper.

Esta forma de seleção é desnecessária neste caso porque como um id deve ser único na página, você pode simplesmente selecionar apenas o #menu direto, sem mencionar seus pais e avôs.

Geralmente se faz isso com classes ou tags, porque você pode querer selecionar uma classe ou tag que se encontra no #menu mas não quer selecionar uma que exista em outro lugar. Ex.:

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

Altura da borda

A borda só possui a propriedade border[-top|right|bottom|left]-width que nada mais é que a espessura. Se quiser criar uma pseudo-borda para dar um efeito de que as bordas right ou left tenham uma "altura" que não seja a normal, poderá recorrer a gambiarras pseudo-elementos, como ::before e ::after.

2

1 - gostaria de saber se tem alguma diferença na hora da estilização de uma página usando div#minha_div ou #minha_div...

A diferença é que quando você coloca uma tag em HTML na frente do id ou da classe esta só será executada através da tag. Exemplo:

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>

Repare que mesmo a tag <p>do paragrafo 2 tendo o mesmo id bgRed da div, apenas a div recuperou o estilo. Pois está configurado para ser assim.

2 - e outra diferença se influencia colocar o caminho todo da div que vai ser estilizada por exemplo #wrapper #topo #menu e qual a diferença entre elas

Isto é importante quando você precisa executar um estilo específico para essa visualização. A diferença é quando seu layout tiver menu dentro de um topo que estará dentro de um wrapper este estilo será executado. Repare nesse exemplo:

#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>

As cores foram configuradas em red para todas as divs, utilizando ",". Depois é inserido um estilo específico que mudará a cor apenas naquele caso. Repare o menu quando está sozinho, ou seja, forda das outras divs, ele recupera a configuração anterior.

3 - outra coisa que eu queria saber, é se tem alguma propriedade que defina a altura do border-right ou border-left

Não existe. Mas tem como fazer. Veja:

#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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .