Skip to content

Instantly share code, notes, and snippets.

@tiagoporto

tiagoporto/selectors_css.html

Last active August 29, 2015 13:58
Show Gist options
  • Save tiagoporto/10037754 to your computer and use it in GitHub Desktop.
Save tiagoporto/10037754 to your computer and use it in GitHub Desktop.
Download ZIP
Advanced CSS selectors
Raw
selectors_css.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced CSS selectors</title>
<style>
/* Siblings Selector */
/* Seleciona todos os elementos após o elemento principal. */
/* Works in IE7+ */
h2 ~ p {
color: #bc2c51;
}
/* Adjacent Siblings Selector */
/* Seleciona apenas o elemento imediatamente após o seletor. */
/* Works in IE7+ */
h2 + p {
color: #566dbc;
}
/* Direct Child Selector */
/* Seleciona todos os filhos direto do elemento principal, e não os netos. */
/* Works in IE7+ */
article > h2 {
color: #68bc4c;
}
/* Negation Selector */
/* Seleciona todos os elementos menos o especificado. */
/* Works in IE9+ */
li:not(.especial){
color: #958f94;
}
/* Pseudo-classes */
/* Works in IE7+ */
li:first-child{
color: #95085d;
}
/* Works in IE9+ */
li:last-child{
color: #248995;
}
/*
CSS3 provides four powerful pseudo-classes that allow the CSS designer to select multiple elements according to their positions in a document tree.
The argument, N, can be a keyword, a number, or a number expression of the form an+b.
*/
/* Even elements */
tr:nth-child(even){
background-color: blue;
}
/* Odd Elements*/
tr:nth-child(odd){
background-color: green;
}
tr:nth-child(3){
background-color: lightgrey;
}
/*The argument N can also be given as an+b, where a and b are integers (for example, 3n+1).*/
.test div:nth-child(2n+3){
color: blue; /* Select the third element, after two in two */
}
.test div:nth-last-child(1){
color: red;
}
.test div:nth-of-type(1){
color: green;
}
.test div:nth-last-of-type(2){
color: yellow;
}
div > *:last-child{
margin: 20px;
}
input:focus{
border: 5px solid yellow;
}
/* Pseudo-classes of State */
/* seleciona o link no exato momento em que passamos o mouse por cima dele */
a:hover{
color: blue;
}
/* seleciona todas as âncoras que têm o atributo "href", ou seja, links */
a:link{
color: red;
}
/* seleciona todos os links cujo valor de "href" é um endereço já visitado */
a:visited{
color: green;
}
/* seleciona o link no exato momento em que clicamos nele */
a:active{
color: purple;
}
input:checked{
}
div:empty{
}; /* <div>s vazios */
/* Pseudo Elements */
.sample:first-letter {
font-size: 200%;
}
.sample:first-line {
font-style: italic;
}
/* Insert content before element */
a:before{
content: '[' ;
}
/* Insert content after element */
a:after{
content: ']' ;
}
/* Atributes Selector */
/* Select all inputs with atribute type = text */
input[type="text"]{
}
/* Select all link with atribute title */
a[title]{
}
/* Select all elements with the atribute href is the the same */
a[href="http://tiagoporto.com/"]{
}
/* Seleciona elementos com o atributos que comecem com */
a[href^="http://"]{
}
/* Seleciona elementos com atributos cujo seu valor termine com html */
a[href$=html]{
}
/* Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços */
a[title~="css"]{
}
/*Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”*/
a[title*="artigo"]{
}
/* Seleciona o elemento cujo o valor do atributo hreflang comece com pt */
a[hreflang|="pt"]{
}
/* Seleciona todos os links cujo atributo class comece com link seguido de um hífen */
a[class|="link-"]{
}
</style>
</head>
<body>
<input type="text">
<div class="test">
<p>Pseudo-classes</p>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
<div>teste</div>
</div>
<h1>Advanced CSS selectors</h1>
<h2>Title</h2>
<p>Adjacent Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
<article>
<h2>Direct child</h2>
<p>Adjacent Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
<h2>Direct child</h2>
<p>Adjacent Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
<p>Siblings</p>
</article>
<ul>
<li>First List Item</li>
<li>List Item</li>
<li class="especial">Especial List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>Last List Item</li>
</ul>
<form>
<input type="text" value="Input with atribute value" >
</form>
<table>
<tbody>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</table>
<p class="sample">This is a sample paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ipsam, omnis laborum dolores facere laboriosam officia velit iure cum deleniti accusamus eum sint obcaecati et animi nam incidunt facilis debitis similique sunt? Animi, cupiditate, repudiandae, cum recusandae at inventore quis iste sequi nobis excepturi error nam porro aliquam perferendis ducimus perspiciatis modi magni minus commodi veritatis dolorem dignissimos quia praesentium quas cumque. Consequatur, repellendus ea hic facilis nemo amet! Dolore, eligendi, delectus, aspernatur quos animi sit tenetur ducimus est optio dolores fuga perferendis commodi veniam consectetur perspiciatis expedita voluptate pariatur fugit unde alias amet architecto minima eius rem voluptatem. Quidem! </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment