Pseudo-classes و کلاس های CSS

می توان Pseudo-classes را با کلاس های CSS ترکیب کرد.

a.red:visited {color:#FF0000;}<a class="red" href="css_syntax.asp">CSS Syntax</a>

 اگر لینک مثال بالا بازدید شده باشد، قرمز نمایش داده خواهد شد.

CSS- The :first-child Pseudo-class

:first-child pseudo-class با عنصری معین شده که اولین child عنصر دیگر است، match می شود.

نکته مهم: برای اینکه :first-child در IE کارکند، یک DOCTYPE> باید تعریف شود.

عنصر اول <p> را match کنید

در مثال زیر، سلکتور با هر عنصر <p> که اولین child هر عنصر است، match می شود:

<html>
<head>
<style type="text/css">
p:first-child
{color:blue;
} </style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>

</html>
عنصر اول <i> را در همه عنصرهای <p> مچ کنید

در مثال زیر، سلکتور با اولین عنصر <i> در همه عنصرها مچ می شود:

 

<html>
<head>
<style type="text/css">
p > i:first-child
{font-weight:bold;
} </style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

 

همه عنصرهای <i> را همه عنصرهای first child <p> مچ کنید

در مثال زیر، سلکتور با همه عنصرهای <i> در عنصرهای <p> که اولین child عنصر دیگر است، مچ می شود:

 

<html>
<head>
<style type="text/css">
p:first-child i
{color:blue;
} </style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

 

CSS- The :lang Pseudo-class

:lang pseudo-class به شما اجازه می دهد قوانین مخصوصی بر ای زبان های مختلف تعریف کنید.

نکته مهم: Internet Explorer 8 و بالاتر، :lang pseudo-class را ساپورت می کند، اگر یک DOCTYPE> تعریف شده باشد.

در مثال زیر، :lang class برای عنصر q با lang="no" علامت نقل قول تعریف می کند:

<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Pseudo-elements در CSS

سینتکس

سیتنکس pseudo-elements:

selector:pseudo-element {property:value;}

  کلاس های CSS را می توان با pseudo-elements نیز می توان استفاده کرد:

selector.class:pseudo-element {property:value;}

 

:first-line Pseudo-element

از "first-line" pseudo-element برای اضافه کردن استایل ویژه به اولین خط متن استفاده می شود.

در مثال زیر، مرورگر خط اول متن را در عنصر p، مطابق با استایل "خط اول pseudo-element " آرایش می کند.

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

نکته مهم: "خط اول pseudo-element " را فقط می توان با عنصرهای block-level

استفاده کرد.

نکته مهم پراپرتی های زیر به "خط اول pseudo-element " اعمال می شوند:

  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
:first-letter Pseudo-element

از "حرف اول pseudo-element" برای اضافه کردن استایلی ویژه به اولین حرف متن استفاده می شود.

 

p:first-letter 
{color:#ff0000;
font-size:xx-large;
}

 نکته مهم: "حرف اول pseudo-element " را فقط می توان با عنصرهای block-level

استفاده کرد.

نکته مهم پراپرتی های زیر به "حرف اول pseudo-element " اعمال می شوند:

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear
Pseudo-elements و کلاس های CSS

Pseudo-elements را می توان با کلاس های CSS ترکیب کرد:


p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>

 مثلا بالاحرف اول همه پاراگراف ها با class="article" را قرمز نشان می دهد.