Seletores CSS

Front-end CSS
#1

Olá boa tarde se tratando dessa estrutura de código:

`
< html>

<head>    

	<title>Aula 01 - Ximfrofro</title>

	<link href="aula1.css" rel="stylesheet" type="text/css"/>

</head>

<body>

	<span>O que é o Ximfrofro?</span>

	<p>Eu não tenho a mínima ideia do que seja...<br/>Porém alguém aí deve saber.</p>

	<div>Ou não<span>!</span></div>
	
	<script src="aula1.js" type="text/javascript"></script>

</body>
`

Qual seletor e como eu consigo estilizar somente o span que está fora dos paragrafo
**<span>O que é o Ximfrofro?</span>**

ja tentei utilizar vários seletores do tipo :only-child :first-of-type :only-of-type e varios outros e não consegui todos atinge o span que esta dentro do paragrafo também

OBS: O HTML NAO PODE SER MUDADO SOMENTE COM CSS

#2

Bom tarde, amigo

body span:nth-child(1) {
_ color: blue; _
}

O código acima pega o primeiro span logo após o body.

body > span {
_ color: blue; _
}

Já este pega todos os span filhos diretos de body.

#3

Você pode usar ID’s e Class. Por exemplo, na tag vc colocaria:

Usando ID:
<span id="id-selector">O que é um Ximfrofro?</span>

aí no CSS você colocaria dessa forma para estilizar a tag:

#id-selector {
  /*code goes here*/
}

Usando Class:

<span class="class-selector">O que é um Ximfrofro?</span>

aí no CSS você coloca da seguinte forma para estilizar a tag:

.class-selector {
  /*code goes here*/
}

OBS: Os nomes “id-selector” e “class-selector” foram opcionais. Você pode dar qualquer nome que ache
interessante para identificar a sua tag.

#4

Obrigado eu consegui fazer com o body > span.

#5

a idéia era não usar classes e sim seletores do css;

1 curtida
#6

Classes e ID são seletores também.

1 curtida