CSS ﻪﺒﺷ ﯼﺎﻫ ﺱﻼﮐ

فهرست مطالب

نمایش فهرست مطالب

؟ﺖﺴﯿﭼ ﺎﻫ ﺱﻼﮐ ﻪﺒﺷ

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺹﺎﺧ ﺖﻟﺎﺣ ﮏﯾ ﻒﯾﺮﻌﺗ ﯼﺍﺮﺑ ﺱﻼﮐ ﻪﺒﺷ ﮏﯾ

:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺯ ﺩﺭﺍﻮﻣ ﯼﺍﺮﺑ ﻥﺁ ﺯﺍ ﻥﺍﻮﺗ ﯽﻣ ،ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ ﻪﺑ

ﺪﯿﻫﺪﺑ ﻞﯾﺎﺘﺳﺍ ﻥﺁ ﻪﺑ ،ﺩﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﯼﺮﺼﻨﻋ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻧﺎﻣﺯ
ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﻩﺪﺸﻧ ﺪﯾﺩﺯﺎﺑ ﻭ ﻩﺪﺷ ﺪﯾﺩﺯﺎﺑ ﯼﺎﻫﺪﻧﻮﯿﭘ ﮏﺒﺳ
ﺪﯿﻫﺪﺑ ﻞﯾﺎﺘﺳﺍ ﻥﺁ ﻪﺑ ،ﺪﻨﮐﯽﻣ ﺱﻮﮐﻮﻓ ﯼﺮﺼﻨﻋ ﻪﮐ ﯽﻧﺎﻣﺯ

Mouse Over Me

ﻮﺤﻧ

:ﺎﻫ ﺱﻼﮐ ﻪﺒﺷ ﺲﮑﺘﻨﯿﺳ

selector:pseudo-class {
  property: value;
}

ﺎﻫ ﺱﻼﮐ ﻪﺒﺷ ﺮﮕﻨﻟ

:ﺩﺍﺩ ﺶﯾﺎﻤﻧ ﯽﻔﻠﺘﺨﻣ ﯼﺎﻫ ﺵﻭﺭ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺎﻫﺪﻧﻮﯿﭘ

ﻝﺎﺜﻣ

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

ﻪﺟﻮﺗ: a:hover ﺯﺍ ﺪﻌﺑ ﺪﯾﺎﺑ

`HTML ﯼﺎﻫ ﺱﻼﮐ ﻭ ﻪﺒﺷ ﯼﺎﻫ ﺱﻼﮐ`

:ﺩﺮﮐ ﺐﯿﮐﺮﺗ HTML ﯼﺎﻫ ﺱﻼﮐ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺎﻫ ﺱﻼﮐ ﻪﺒﺷ

:ﺪﻨﮐﯽﻣ ﺮﯿﯿﻐﺗ ﻥﺁ ﮓﻧﺭ ،ﺪﯾﺭﺍﺩﯽﻣ ﻪﮕﻧ ﻝﺎﺜﻣ ﺭﺩ ﺪﻧﻮﯿﭘ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ ﯽﺘﻗﻭ

`ﻝﺎﺜﻣ`

a.highlight:hover {
  color: #ff0000;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

`ﺪﯾﺭﺍﺩ ﻪﮕﻧ <div> ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ`

:<div> ﺮﺼﻨﻋ ﺭﺩ :hover ﻪﺒﺷ ﺱﻼﮐ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺯﺍ ﯽ

`ﻝﺎﺜﻣ`

div:hover {
  background-color: blue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

`ﺭﺍﺰﺑﺍ ﻩﺩﺎﺳ ﯼﺎﻤﻨﻫﺍﺭ`

:(ﺭﺍﺰﺑﺍ ﯼﺎﻤﻨﻫﺍﺭ ﮏﯾ ﺪﻨﻧﺎﻣ) ﺩﻮﺷ ﻩﺩﺍﺩ ﻥﺎﺸﻧ <p> ﺮﺼﻨﻋ ﺎﺗ ﺪﯾﺭﺍﺩ ﻪﮕﻧ <div> ﺮﺼﻨﻋ ﮏﯾ ﯼﻭ

!ﻡﺎﺠﻨﯾﺍ ﻦﻣ !ﺍﺩﺎﺗ

`ﻝﺎﺜﻣ`

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

`CSS - :first-child ﺱﻼﮐ ﻪﺒﺷ`

.ﺖﺳﺍ ﺮﮕﯾﺩ ﺮﺼﻨﻋ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﮐ ﺩﺭﺍﺩ ﺖﻘﺑﺎﻄﻣ ﯼﺍ ﻩﺪﺷ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﺎﺑ ﺪﯿﻫﺩ ﺖﻘﺑﺎﻄﻣ ﺍﺭ <p> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ

:ﺪﻫﺩ ﯽﻣ ﺖﻘﺑﺎﻄﻣ ﺖﺳﺍ ﺮﺼﻨﻋ ﺮﻫ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﺮﮕﺑﺎﺨﺘﻧﺍ ،ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ

`ﻝﺎﺜﻣ`

p:first-child
{
   
color: blue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

`ﺪﯿﻫﺩ ﺖﻘﺑﺎﻄﻣ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺭﺩ ﺍﺭ <i> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ`

:ﺪﻫﺩ ﯽﻣ ﺖﻘﺑﺎﻄﻣ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺭﺩ ﺍﺭ <i> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ ﺮﮕﺑﺎﺨﺘﻧﺍ ،ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ

`ﻝﺎﺜﻣ`

p i:first-child
{
   
color: blue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

`ﺪﯿﻫﺩ ﺖﻘﺑﺎﻄﻣ <p> ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺭﺩ ﺍﺭ <i> ﺮﺻﺎﻨﻋ ﻪﻤﻫ`

:ﺪﻫﺩ ﯽﻣ ﺖﻘﺑﺎﻄﻣ ﺪﻨﺘﺴﻫ ﺮﮕﯾﺩ ﺮﺼﻨﻋ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﮐ <p> ﺮﺻﺎﻨﻋ ﺭﺩ ﺍﺭ <i> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﮕﺑﺎ

`ﻝﺎﺜﻣ`

p:first-child i
{
  color: blue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

`CSS - ﻪﺒﺷ ﺱﻼﮐ :lang`

.ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻥﺎﺑﺯ ﯼﺍﺮﺑ ﺍﺭ ﯽﺻﺎﺧ ﻦﯿﻧﺍﻮﻗ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ

:ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ "lang="no ﺎﺑ ﺮﺻﺎﻨﻋ ﯼﺍﺮﺑ ﺍﺭ ﻝﻮﻗ ﻞﻘﻧ ﺖﻣﻼﻋ

`ﻝﺎﺜﻣ`

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

`ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ`

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺎﻫ ﮏﻨﯿﻟ ﻪﺑ ﺍﺭ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﮏﺒﺳ

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

focus: ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

`CSS ﻪﺒﺷ ﯼﺎﻫ ﺱﻼﮐ ﻡﺎﻤﺗ`

:active

:ﻝﺎﺜﻣ

a:active

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓ ﮏﻨﯿﻟ

:checked

:ﻝﺎﺜﻣ

input:checked

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺩﺯ ﺖﻣﻼﻋ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ

:disabled

:ﻝﺎﺜﻣ

input:disabled

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓﺮﯿﻏ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ

:empty

:ﻝﺎﺜﻣ

p:empty

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﺭﺍﺪﻧ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:enabled

:ﻝﺎﺜﻣ

input:enabled

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ

:first-child

:ﻝﺎﺜﻣ

p:first-child

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:first-of-type

:ﻝﺎﺜﻣ

p:first-of-type

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:focus

:ﻝﺎﺜﻣ

input:focus

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﺭﺍﺩ ﺱﻮﮐﻮﻓ ﻪﮐ ﺍﺭ <input> ﺮﺼﻨﻋ

:hover

:ﻝﺎﺜﻣ

a:hover

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺱﻭﺎﻣ ﯼﻭﺭ ﺍﺭ ﺎﻫﺪﻧﻮﯿﭘ

:in-range

:ﻝﺎﺜﻣ

input:in-range

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺺﺨﺸﻣ ﻩﺩﻭﺪﺤﻣ ﺭﺩ ﯼﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:invalid

:ﻝﺎﺜﻣ

input:invalid

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺮﺒﺘﻌﻣﺎﻧ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻪﻤﻫ

:lang(language)

:ﻝﺎﺜﻣ

p:lang(it)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ "it" ﺎﺑ ﻪﮐ lang ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:last-child

:ﻝﺎﺜﻣ

p:last-child

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:last-of-type

:ﻝﺎﺜﻣ

p:last-of-type

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯾﺮﺧﺁ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:link

:ﻝﺎﺜﻣ

a:link

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺪﺸﻧ ﺪﯾﺩﺯﺎﺑ ﯼﺎﻫﺪﻧﻮﯿﭘ ﻪﻤﻫ

:not(selector)

:ﻝﺎﺜﻣ

:not(p)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺴﯿﻧ <p> ﺮﺼﻨﻋ ﻪﮐ ﺍﺭ ﯼﺮﺼﻨﻋ ﺮﻫ

:nth-child(n)

:ﻝﺎﺜﻣ

p:nth-child(2)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻡﻭﺩ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:nth-last-child(n)

:ﻝﺎﺜﻣ

p:nth-last-child(2)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐﯽﻣ ﺵﺭﺎﻤﺷ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﺯﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻡﻭﺩ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:nth-last-of-type(n)

:ﻝﺎﺜﻣ

p:nth-last-of-type(2)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐﯽﻣ ﺵﺭﺎﻤﺷ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﺯﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻣﻭﺩ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:nth-of-type(n)

:ﻝﺎﺜﻣ

p:nth-of-type(2)

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻣﻭﺩ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:only-of-type

:ﻝﺎﺜﻣ

p:only-of-type

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﺎﻬﻨﺗ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:only-child

:ﻝﺎﺜﻣ

p:only-child

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﺪﻧﺯﺮﻓ ﺎﻬﻨﺗ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ

:optional

:ﻝﺎﺜﻣ

input:optional

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "ﯽﻣﺍﺰﻟﺍ" ﯽﮔﮋﯾﻭ ﻥﻭﺪﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:out-of-range

:ﻝﺎﺜﻣ

input:out-of-range

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺺﺨﺸﻣ ﻩﺩﻭﺪﺤﻣ ﺯﺍ ﺝﺭﺎﺧ ﯼﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:read-only

:ﻝﺎﺜﻣ

input:read-only

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻩﺪﺷ ﺺﺨﺸﻣ "readonly" ﻪﺼﺨﺸﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:read-write

:ﻝﺎﺜﻣ

input:read-write

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "readonly" ﯽﮔﮋﯾﻭ ﻥﻭﺪﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:required

:ﻝﺎﺜﻣ

input:required

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻩﺪﺷ ﺺﺨﺸﻣ "ﻡﺯﻻ" ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ

:root

:ﻝﺎﺜﻣ

root

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺪﻨﺳ ﻪﺸﯾﺭ ﺮﺼﻨﻋ

:target

:ﻝﺎﺜﻣ

#news:target

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

(ﺪﯿﻨﮐ ﮏﯿﻠﮐ ﺮﮕﻨﻟ ﻡﺎﻧ ﻥﺁ ﯼﻭﺎﺣ URL ﯼﻭﺭ) ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﯽﻠﻌﻓ ﻝﺎﻌﻓ news# ﺮﺼﻨﻋ

:valid

:ﻝﺎﺜﻣ

input:valid

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺮﺒﺘﻌﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻪﻤﻫ

:visited

:ﻝﺎﺜﻣ

a:visited

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺪﺷ ﺪﯾﺩﺯﺎﺑ ﯼﺎﻫﺪﻧﻮﯿﭘ ﻪﻤﻫ

`CSS ﻪﺒﺷ ﺮﺻﺎﻨﻋ ﻪﻤﻫ`

::after

:ﻝﺎﺜﻣ

p::after

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﯿﻨﮐ ﺩﺭﺍﻭ ﺍﺭ ﺍﻮﺘﺤﻣ <p> ﺮﺼﻨﻋ ﺮﻫ ﺯﺍ ﺪﻌﺑ

::before

:ﻝﺎﺜﻣ

p::before

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﯿﻨﮐ ﺩﺭﺍﻭ ﺍﺭ ﺍﻮﺘﺤﻣ <p> ﺮﺼﻨﻋ ﺮﻫ ﺯﺍ ﻞﺒﻗ

::first-letter

:ﻝﺎﺜﻣ

p::first-letter

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﻭﺍ ﻑﺮﺣ

::first-line

:ﻝﺎﺜﻣ

p::first-line

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﻭﺍ ﻂﺧ

::marker

:ﻝﺎﺜﻣ

::marker

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ ﯼﺎﻫﺮﮕﻧﺎﺸﻧ

::selection

:ﻝﺎﺜﻣ

p::selection

:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ

ﺖﺳﺍ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﺮﺑﺭﺎﮐ ﻂﺳﻮﺗ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﯽﺸﺨﺑ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →