CSS3 pseudoclasses

  • :nth-child(n)
  • :nth-last-child(n)
  • :checked
  • :disabled, :enabled
  • :selection
  • :only-child
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :last-of-type
  • :first-of-type
  • :only-of-type
  • :empty
  • :root
  • :not(x)
  • :target
  • div :nth-child(3n+5)
  • div :nth-child(odd)
  • div :nth-child(5n)
  • div :nth-child(even)
  • div :nth-child(0n+3)
  • div :nth-child(1)
  • div :nth-child(-n+3)
<style>
  div :nth-child(3n+5) {
    background-color: #1c2931;
  }
</style>
  • div span:nth-last-child(3n+5)
  • div span:nth-last-child(odd)
  • div span:nth-last-child(5n)
  • div span:nth-last-child(even)
  • div span:nth-last-child(0n+3)
  • div span:nth-last-child(1)
  • div span:nth-last-child(-n+3)
<style>
  div span:nth-last-child(5) {
    background-color: #1c2931;
  }
</style>
<style>
  input:checked::after {
    content: 'checked!';
  }
  input:checked {
    background: #ccc;
  }
</style>
<style>
  input:disabled {
    opacity: 0.2;
    width: 80px;
    margin-right: 68px;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
  }
  input:enabled {
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
  }
</style>
<style>
  div ::selection {
    color: #ff0000;
    background-color: #000;
  }
</style>
<style>
  div p:only-child {
    background-color: #1c2931;
  }
</style>
<style>
  div span:nth-of-type(5) {
    background-color: #1c2931;
  }
</style>
<style>
  div p:nth-last-of-type(2) {
    background-color: #1c2931;
  }
</style>
<style>
  div p:last-of-type {
    background-color: #1c2931;
  }
</style>
<style>
  div span:first-of-type {
    background-color: #1c2931;
  }
</style>
<style>
  div p:only-of-type {
    background-color: #1c2931;
  }
</style>
<style>
  div p:empty {
    width:100px;
    height:20px;
    margin-left: 30px;
    border: 1px dotted;
    background-color: #1c2931;
  }
</style>
<style>
  :root {
    margin: 20px;
    background: #fff;
  }
</style>
<style>
  img:not([alt]) {
    border: 2px solid yellow;
  }
</style>
<style>
  :not(p) {
    color: yellow;
  }
</style>
<style>
  :target + div {
    padding: 5px;
    background: #51818d;
    transition: ease-in all 0.5s;
  }
  :target {
    color: #ffc698;
  }
</style>
<ul>
  <li>
    <a href="#tekst1" name="powrot1">
      Section 1
    </a>
  </li>
  <li>
    <a href="#tekst2" name="powrot2">
      Section 2
    </a>
  </li>
</ul>
…
…
…
<div>
  <a name="tekst1"></a>
  <div>
    <h2>Section 1</h2>
    Lorem ipsum et dolorem…
  </div>
  <a href="#powrot1">Back</a>
</div>

<div>
  <a name="tekst2"></a>
  <div>
    <h2>Section 2</h2>
    Lorem ipsum et dolorem…
  </div>
  <a href="#powrot2">Back</a>
</div>
< d i v >

<h2>Lorem ipsum et dolorem</h2>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> < / d i v >
< d i v > <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> < / d i v >

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

<h2>Tytył nie zaznaczony</h2>


<div>
    <span>Lorem ipsum et dolorem</span></div>

<div>
  <p>

    Example text, which is marked

  </p>
</div>

<div>
  <p>

    <span>Lorem ipsum et dolorem</span>     this text is marked too

  </p>
</div>
<div>

<h2>Lorem ipsum et dolorem</h2>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> </div>
<div>

<h2>Lorem ipsum et dolorem</h2>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> </div>
<div>

<h2>Lorem ipsum et dolorem</h2>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> </div>
<div>

<h2>Lorem ipsum et dolorem</h2>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span>

<p>Lorem ipsum et dolorem</p>

<p>Lorem ipsum et dolorem</p>

<span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> <span>Lorem ipsum et dolorem</span> </div>

<h2>Title not marked</h2>


<div>
    <span>Lorem ipsum et dolorem</span>
</div>

<div>
  <p>

    Example text, which is marked

  </p>
</div>

<div>
  <p>

    <span>Lorem ipsum et dolorem</span>     this text is marked too
     because is inside paragraph

  </p>
</div>
<div>
  <p>

  </p>
</div>

<div>
  <p>

  </p>
</div>

<div>
  <p>

    some text

  </p>
</div>
Disco
Tokio nocą

<div>
  <span>
    text inside span
  </span>
</div>

<div>
  <p>

    text inside paragraph

  </p>
</div>
  • Section 1
  • Section 2
  • Section 3
  • Section 4
  • Section 5

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut nisi nisl, ut tempus sem. Integer mattis commodo tristique. Suspendisse interdum lectus at nisl varius eu cursus quam convallis. Nam sit amet arcu vulputate nibh eleifend venenatis rutrum sit amet odio. Quisque blandit pretium lacinia. Nunc eros ligula, dapibus quis lobortis fermentum, venenatis non ante. Sed fermentum leo vel diam sodales vulputate. Suspendisse venenatis auctor semper. Aliquam eget nulla purus, sed iaculis elit. Vivamus sodales fermentum arcu, sed sodales leo egestas eu. Cras sapien erat, pulvinar sit amet sagittis et, commodo vel velit. Phasellus id mauris urna, quis tempor sapien.

Back

Section 2

Duis rhoncus, lectus ut tincidunt fermentum, nulla nibh euismod justo, nec gravida nibh ante id neque. Nulla facilisi. In ut urna non orci dapibus blandit. Suspendisse vitae mi arcu. Duis fringilla consequat consectetur. Integer vitae nibh sed orci tempor volutpat. Maecenas placerat, eros id gravida porttitor, ligula massa pulvinar lacus, eget vestibulum velit urna nec massa. Nam eu ipsum eget tortor pretium adipiscing id sit amet velit. Quisque nec justo ac dolor fringilla pellentesque a vel lectus. Proin tempor erat sed magna venenatis accumsan.

Back

Section 3

Nulla id orci augue. Vestibulum neque nisi, semper vitae facilisis sed, varius quis ligula. Fusce non elit nec massa venenatis aliquet et dapibus ligula. Sed et leo lorem. Nullam ut nulla nibh, in sodales enim. Nullam at cursus nulla. Donec scelerisque rutrum feugiat. Mauris eget lacus ligula. Suspendisse gravida semper dapibus. Donec velit risus, molestie sed imperdiet sit amet, sodales et massa. Cras sed dignissim mauris. Aenean ornare iaculis scelerisque. Aliquam consequat, ipsum vel ornare interdum, nunc dui tempor magna, eu feugiat eros magna at eros. Nam ut lacus vel quam aliquam malesuada. Duis dictum cursus nisi id sagittis. Duis sed eros quis massa vehicula laoreet.

Back

Section 4

Duis gravida lorem at tortor volutpat commodo. Nulla et nunc sit amet lacus interdum viverra. Suspendisse potenti. Nullam pretium odio eu ligula sodales quis feugiat risus vulputate. Phasellus eget lorem enim, ut placerat nibh. Sed a purus a nunc fringilla rhoncus eget et purus. Suspendisse potenti. Etiam eu diam dui, eu dictum urna. Vivamus lacinia adipiscing aliquam. Duis at ante at diam varius feugiat eu nec ipsum. Vestibulum varius, augue ac suscipit eleifend, mi nisi bibendum odio, id tempus mi quam vel quam. Curabitur lorem odio, tincidunt sit amet vehicula eget, ullamcorper at mauris. Aliquam euismod vestibulum sem, vitae semper massa porta at. Duis imperdiet, turpis at accumsan venenatis, tortor sapien hendrerit mauris, quis venenatis ante lorem ac dui. In vulputate lacus non mauris consectetur imperdiet. Nulla ac purus et turpis accumsan ornare. Vivamus velit sapien, dignissim sit amet sollicitudin eget, sagittis at metus.

Back

Section 5

Suspendisse pellentesque condimentum pellentesque. Fusce mollis fringilla lectus, non rhoncus sem lacinia a. Sed viverra massa non sem porttitor eu ornare erat venenatis. Maecenas felis mi, interdum et suscipit ut, tincidunt eu libero. Proin eget pulvinar ligula. Aliquam ut urna sodales dui aliquet ullamcorper scelerisque sed ante. Praesent nec tortor nisl, non pellentesque neque. Etiam felis turpis, rhoncus eget pulvinar ut, sollicitudin vitae lorem. Ut enim metus, congue sed vulputate eu, aliquam sit amet urna. Ut a est vel enim pulvinar varius. Aliquam elementum lectus eget erat facilisis vitae ornare sapien pretium. Sed congue eleifend dolor, ac accumsan dolor sodales aliquet. Cras vehicula semper quam quis sollicitudin. Aenean est sem, lacinia id iaculis at, volutpat eu lorem. Sed ut faucibus arcu. Nulla lacinia, dolor molestie dictum pharetra, mauris erat porta neque, ut egestas massa velit aliquet velit.

Back