Click a selector: Click a selector to see which element(s) that gets selected in the result:
.intro
#Lastname
.intro, #Lastname
h1
h1, p
div p
div > p
ul + p
ul ~ table
*
p.myquote
[id]
[id=my-Address]
[id$=ess]
[id|=my]
[id^=L]
[title~=beautiful]
[id*=s]
:checked
:disabled
:enabled
:empty
:focus
p:first-child
p::first-letter
p::first-line
p:first-of-type
h1:hover
input:in-range
input:out-of-range
input:invalid
input:valid
p:lang(it)
p:last-child
p:last-of-type
tr:nth-child(even)
tr:nth-child(odd)
li:nth-child(1)
li:nth-last-child(1)
li:nth-of-type(2)
li:nth-last-of-type(2)
b:only-child
h3:only-of-type
:root

Selector:
ul + p

Selects all <p> elements that are next to <ul> elements.

Result:

<h1>Welcome to My Homepage</h1>

<div class="intro">

<p>My name is Donald <span id="Lastname">Duck.</span></p>

<p id="my-Address">I live in Duckburg</p>

<p>I have many friends:</p>

</div>

<ul id="Listfriends>
  • <li>Goofy</li>
  • <li>Mickey</li>
  • <li>Daisy</li>
  • <li>Pluto</li>
</ul>

    <p class="myquote">All my friends are great!<br>
    But I really like Daisy!!</p>

    <p lang="it" title="Hello beautiful">Ciao bella</p>

    <h3>We are all animals!</h3>

    <p><b>My latest discoveries have led me to believe that we are all animals:</b></p>

    <table>
      Name Type of Animal
      Mickey Mouse
      Goofey Dog
      Daisy Duck
      Pluto Dog
      </table>

      Click the CSS Selectors and see the specified element(s) get selected. © w3schools.com