CSS 伪类

ਪਸੁੰਦੀ ਕੀ ਹੈ?

ਪਸੁੰਦੀ ਐਲੀਮੈਂਟ ਦੇ ਵਿਸ਼ੇਸ਼ ਸਥਿਤੀ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。

ਉਦਾਹਰਣ ਵਜੋਂ ਇਹ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ:

  • ਐਲੀਮੈਂਟ ਉੱਤੇ ਮਾਉਸ ਲਟਕਣ ਉੱਤੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ
  • ਸੁਲਭ ਅਤੇ ਨਸੀਬੀ ਲਿੰਕਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਸੈਟ ਕਰੋ
  • ਐਲੀਮੈਂਟ ਦੇ ਫੋਕਸ ਮਿਲਣ ਉੱਤੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ
ਮੈਂ ਉੱਤੇ ਮਾਉਸ ਲਟਕਾਓ

ਗਰੇਫਟਾਪ

ਪਸੁੰਦੀ ਦੀ ਗਰੇਫਟਾਪ:

selector:pseudo-class {
  property: value;
}

ਆਂਕਨ ਪਸੁੰਦੀ

ਲਿੰਕ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

/* ਸੁਲਭ ਨਹੀਂ ਕੀਤੇ ਹੋਏ */
a:link {
  color: #FF0000;
}
/* ਸੁਲਭ ਕੀਤੇ ਹੋਏ */
a:visited {
  color: #00FF00;
}
/* ਮਾਉਸ ਲਟਕਣ ਵਾਲਾ ਲਿੰਕ */
a:hover {
  color: #FF00FF;
}
/* ਚੁਣੇ ਹੋਏ ਲਿੰਕ */
a:active {
  color: #0000FF;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:a:hover ਮਿੱਥਣੇ ਹੋਏ CSS ਵਿੱਚ a:link ਅਤੇ a:visited ਬਾਅਦ ਵਿੱਚ ਕੰਮ ਆਉਣਗੇ!a:active ਮਿੱਥਣੇ ਹੋਏ CSS ਵਿੱਚ a:hover ਬਾਅਦ ਵਿੱਚ ਕੰਮ ਆਉਣਗੇ! ਪਸੁੰਦੀ ਦਾ ਨਾਮ ਹਰਫ ਦੀ ਸ਼ਰਤ ਨਹੀਂ ਹੈ。

ਪਸੁੰਦੀ ਅਤੇ CSS ਵਰਗ

ਪਸੁੰਦੀ ਨੂੰ CSS ਵਰਗ ਨਾਲ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

ਜਦੋਂ ਤੁਸੀਂ ਉਦਾਹਰਣ ਵਾਲੇ ਲਿੰਕ ਉੱਤੇ ਮਾਉਸ ਲਟਕਾਓ ਤਾਂ ਇਹ ਰੰਗ ਬਦਲ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

<div> ਉੱਤੇ ਲਟਕਣ ਵਾਲਾ

<div> ਐਲੀਮੈਂਟ ਉੱਤੇ ਵਰਤੋਂ :hover ਪਸੁੰਦੀ ਦਾ ਉਦਾਹਰਣ:

ਉਦਾਹਰਣ

div:hover {
  background-color: blue;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਰਲ ਟੂਲ-ਟਿੱਪ ਹੋਵੇ

ਮਾਉਸ ਨੂੰ <div> ਅੰਗਮੰਡਲ ਉੱਪਰ ਲਟਕਾਓ ਤਾਂ <p> ਅੰਗਮੰਡਲ ਦਿਖਾਇਆ ਜਾਵੇ (ਟੂਲ-ਟਿੱਪ ਦੀ ਤਰ੍ਹਾਂ):

ਮੈਂ ਉੱਪਰ ਲਟਕਾਓ ਤਾਂ <p> ਅੰਗਮੰਡਲ ਦਿਖਾਇਆ ਜਾਵੇ。

ਹੈਹੈ, ਮੈਂ ਇੱਥੇ ਹਾਂ!

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS - :first-child ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ

:first-child ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ ਨਾਲ ਨਿਰਧਾਰਿਤ ਅੰਗਮੰਡਲ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ: ਉਹ ਦੂਜੇ ਅੰਗਮੰਡਲ ਦਾ ਪਹਿਲੇ ਸ਼ਾਖਾ ਵਾਲਾ ਅੰਗਮੰਡਲ ਹੈ。

ਪਹਿਲੇ <p> ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਚੁਣਾਵਕ ਚੋਣਕਾਰ ਕਰਦਾ ਹੈ ਕਿ ਹਰ ਜਿਸ ਵਾਲੇ ਅੰਗਮੰਡਲ ਵਿੱਚ ਪਹਿਲੇ ਸ਼ਾਖਾ ਵਾਲੇ <p> ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ:

ਉਦਾਹਰਣ

p:first-child {
  color: blue;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਹਰ ਜਿਸ <p> ਅੰਗਮੰਡਲ ਵਿੱਚ ਪਹਿਲੇ <i> ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਚੁਣਾਵਕ ਚੋਣਕਾਰ ਕਰਦਾ ਹੈ ਕਿ ਹਰ ਜਿਸ ਵਾਲੇ <p> ਅੰਗਮੰਡਲ ਵਿੱਚ ਪਹਿਲੇ <i> ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਹਰ ਪਹਿਲੇ <p> ਅੰਗਮੰਡਲ ਵਿੱਚ ਹਰ ਜਿਸ ਵਾਲੇ <i> ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਚੁਣਾਵਕ ਚੋਣਕਾਰ ਕਰਦਾ ਹੈ ਕਿ ਹਰ ਜਿਸ ਵਾਲੇ <p> ਅੰਗਮੰਡਲ ਵਿੱਚ ਹਰ ਜਿਸ ਵਾਲੇ <i> ਅੰਗਮੰਡਲ ਵਾਲੇ ਪਹਿਲੇ ਸ਼ਾਖਾ ਵਾਲੇ ਅੰਗਮੰਡਲ ਦਾ ਚੁਣਨਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS - :lang ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ

:lang ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਭਾਸ਼ਾਵਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਨਿਯਮ ਨਿਰਧਾਰਿਤ ਕਰਨ ਦੀ ਅਨੁਮਤੀ ਹੈ。

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ:lang ਲੈਂਗ="en" ਵਾਲੇ <q> ਅੰਗਮੰਡਲ ਲਈ ਚਿੱਤਰ ਨਿਰਧਾਰਿਤ ਕਰੋ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਹੋਰ ਉਦਾਹਰਣ

ਸਰਗਰਮ ਸੂਚਕਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਜੋੜਨਾ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਹ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਸਰਗਰਮ ਸੂਚਕਾਂ ਨੂੰ ਹੋਰ ਸਟਾਈਲ ਜੋੜਨਾ ਹੈ。
ਇਸਤੇਮਾਲ ਕਰਨਾ :focus
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਹ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ :focus ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ。

ਸਾਰੇ CSS ਪਸ਼ੂ-ਵਿਸ਼ੇਸ਼ਣ

ਚੋਣਕਰਤਾ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
:active a:active ਚੁਣੋ ਹਰ ਜਿਸ ਵਾਲੇ ਲਿੰਕ ਸਰਗਰਮ ਹੋਵੇ。
:checked input:checked ਚੁਣੋ ਹਰ ਜਿਸ ਵਾਲੇ <input> ਅੰਗਮੰਡਲ ਚੁਣਿਆ ਹੋਵੇ。
:disabled input:disabled ਚੁਣੋ ਹਰ ਜਿਸ ਵਾਲੇ <input> ਅੰਗਮੰਡਲ ਨਾਲ ਨਾਚੁੱਕ ਹੋਵੇ。
:empty p:empty ਚੁਣੋ ਜਿਸ ਵਾਲੇ <p> ਅੰਗਮੰਡਲ ਕੋਈ ਸ਼ਾਖਾ ਨਹੀਂ ਹੋਵੇ。
:enabled input:enabled ਹਰ ਇੱਕ ਸਕਿੰਨ ਹੋਣ ਵਾਲੇ <input> ਇਲੈਕਟ੍ਰੋਨ
: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) ਹਰ ਇੱਕ lang ਵਾਲੇ ਪ੍ਰਤੀਕ ਨੂੰ "it" ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ <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 ਜਿਸ ਵਿੱਚ "required" ਹੱਕ ਨਹੀਂ ਦਿੱਤਾ ਗਿਆ <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 ਜਿਸ ਵਿੱਚ "required" ਹੱਕ ਦਿੱਤਾ ਗਿਆ ਹੈ <input> ਅੰਗ ਚੋਣ ਕਰੋ。
:root root ਅੰਗ ਦੇ ਰੂਟ ਅੰਗ ਚੋਣ ਕਰੋ。
:target #news:target ਮੌਜੂਦਾ ਗਤੀਸ਼ੀਲ #news ਅੰਗ ਚੋਣ ਕਰੋ (ਜਿਸ ਵਿੱਚ ਇਹ ਚਿੰਨ੍ਹ ਦਾ ਨਾਮ ਹੈ ਅਤੇ ਇਸ ਦਾ URL ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਹੈ)。
: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> ਅੰਗ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਚੋਣ ਕਰੋ。
::selection p::selection ਚੋਣ ਕਰਨ ਵਾਲੇ ਉਪ-ਅੰਗ ਚੋਣ ਕਰੋ。