![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/pseudo-classes-css.png\")
<\/p>\n
<\/p>\n Os links podem ser exibidos de diferentes maneiras:<\/p>\n Exemplo<\/strong><\/p>\n <\/p>\n Pseudo-classes e classes CSS<\/strong><\/p>\n As pseudo-classes podem ser combinadas com as classes CSS:<\/p>\n Quando voc\u00ea passa o mouse sobre o link no exemplo, ele muda de cor:<\/p>\n Um exemplo de uso da\u00a0 Outro exemplo<\/p>\n CSS – Pseudo classe do primeiro filho<\/strong><\/p>\n Corresponder ao primeiro elemento Exemplo<\/strong><\/p>\n Combine o primeiro elemento Exemplo<\/strong><\/p>\n <\/p>\n<\/div>\nselector:pseudo-class\u00a0{<\/span>
\nproperty:<\/span>\u00a0value;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\nPseudo-classes \u00e2ncora<\/h2>\n
\/* unvisited link *\/<\/code>
\na:link {<\/code>
\ncolor: #FF0000;<\/code>
\n}<\/code><\/p>\n\/* visited link *\/<\/code>
\na:visited {<\/code>
\ncolor: #00FF00;<\/code>
\n}<\/code><\/p>\n\/* mouse over link *\/<\/code>
\na:hover {<\/code>
\ncolor: #FF00FF;<\/code>
\n}<\/code><\/p>\n\/* selected link *\/<\/code>
\na:active {<\/code>
\ncolor: #0000FF;<\/code>
\n}<\/code><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* unvisited link *\/\r\na:link {\r\n color: red;\r\n}\r\n\r\n\/* visited link *\/\r\na:visited {\r\n color: green;\r\n}\r\n\r\n\/* mouse over link *\/\r\na:hover {\r\n color: hotpink;\r\n}\r\n\r\n\/* selected link *\/\r\na:active {\r\n color: blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><b><a href=\"default.asp\" target=\"_blank\">This is a link<\/a><\/b><\/p>\r\n<p><b>Note:<\/b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.<\/p>\r\n<p><b>Note:<\/b> a:active MUST come after a:hover in the CSS definition in order to be effective.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\na.highlight:hover {\r\n color: #ff0000;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><a class=\"highlight\" href=\"#\">CSS Syntax<\/a><\/p>\r\n<p><a href=\"#\">CSS Tutorial<\/a><\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nPasse o mouse em <div><\/h2>\n
:hover<\/code> pseudo-classe em um elemento <div>:<\/p>\nExemplo<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: green;\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n}\r\n\r\ndiv:hover {\r\n background-color: blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Mouse over the div element below to change its background color:<\/p>\r\n\r\n<div>Mouse Over Me<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np {\r\n display: none;\r\n background-color: yellow;\r\n padding: 20px;\r\n}\r\n\r\ndiv:hover p {\r\n display: block;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>Hover over me to show the p element\r\n <p>Tada! Here I am!<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nA :first-child<\/code>pseudo-classe corresponde a um elemento especificado que \u00e9 o primeiro filho de outro elemento.<\/p>\n<p><\/code>
\nNo exemplo a seguir, o seletor corresponde a qualquer elemento <p><\/code> que \u00e9 o primeiro filho de qualquer elemento:<\/p>\np:first-child {<\/code>
\ncolor: blue;<\/code>
\n}<\/code><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np:first-child {\r\n color: blue;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>This is some text.<\/p>\r\n<p>This is some text.<\/p>\r\n<p><b>Note:<\/b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n<i><\/code> em todos os elementos <p><\/code>
\nNo exemplo a seguir, o seletor corresponde ao primeiro elemento <i><\/code> em todos os elementos <p><\/code>:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np i:first-child {\r\n color: blue;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>\r\n<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>\r\n<p><b>Note:<\/b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n