Css ਸੂਡੋ-ਕਲਾਸ - ਆਖਰੀ ਤੱਤ-ਆਖਰੀ

Css ਸੂਡੋ-ਕਲਾਸ - ਆਖਰੀ ਤੱਤ-ਆਖਰੀ

HTML ਤੋਂ PSD

ਜਿਆਦਾ ਜਾਣੋ

    <p>ਕਾਰਕੋਸਾ ਵਿੱਚ।</p>

    <hr>

</div>

ਡਿਵ ਟੈਗ ਵਿੱਚ ਆਖਰੀ ਪੈਰੇ ਨੂੰ ਇੰਡੈਂਟ ਕਰਨ ਦੇ ਬਹੁਤ ਸਾਰੇ ਤਰੀਕੇ ਹਨ: ਤੁਸੀਂ ਵਾਰ-ਵਾਰ ਇਨਲਾਈਨ ਸਟਾਈਲ ਲਿਖ ਸਕਦੇ ਹੋ (ਬਹੁਤ ਧੱਫੜ, ਅਜਿਹੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਅਤੇ ਬਦਲਣਾ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ, ਬਹੁਤ ਸਮਾਂ ਲੱਗਦਾ ਹੈ); ਤੁਸੀਂ ਦੁਹਰਾਉਣ ਵਾਲੀ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ (ਬਿਹਤਰ, ਪਰ ਇਸਨੂੰ ਬਣਾਉਣ, ਸੋਧਣ ਅਤੇ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਅਜੇ ਵੀ ਬਹੁਤ ਸਮਾਂ ਲੱਗਦਾ ਹੈ); nth-ਬੱਚੇ ਦੇ ਨਾਲ ਜਾਂ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਆਖਰੀ-ਬੱਚਾ ਹੈ।

ਜਿਆਦਾ ਜਾਣੋ

ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਆਖਰੀ ਲਿੰਕ ਦੇ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਫਰੇਮ ਵੀ ਹੋਵੇਗਾ. ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ, ਅਜਿਹੇ ਫਰੇਮ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਸਦੇ ਪਿੱਛੇ ਇੱਕ ਹੋਰ ਲਿੰਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਆਖਰੀ ਲਿੰਕ ਦੇ ਮਾਮਲੇ ਵਿੱਚ, ਇਹ ਕੇਸ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਤੁਸੀਂ ਵਾਧੂ ਬਾਰਡਰ ਨੂੰ ਹਟਾਉਣ ਲਈ ਆਖਰੀ-ਬੱਚੇ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:

ਡਿਜ਼ਾਇਨ ਦੁਆਰਾ, ਇੱਕ ਫਰੇਮ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਦੇ ਸਾਰੇ ਲਿੰਕਾਂ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਮੇਨੂ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹੋਏ:

nav a { ਬਾਰਡਰ-ਸੱਜੇ: 1px ਠੋਸ #000; }

ਦੇਖਣ ਦਾ ਆਖਰੀ ਮੌਕਾ

ਸਕ੍ਰੈਚ ਤੋਂ ਇੱਕ ਅਨੁਕੂਲ ਵੈੱਬਸਾਈਟ ਦੇ ਖਾਕੇ 'ਤੇ ਇੱਕ ਵਿਹਾਰਕ ਕੋਰਸ!

ਸਾਡੇ ਵਿੱਚੋਂ ਆਖਰੀ: CSS ਵਿੱਚ ਆਖਰੀ-ਬੱਚੇ ਅਤੇ ਆਖਰੀ-ਕਿਸਮ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

nav a { ਬਾਰਡਰ-ਸੱਜੇ: 1px ਠੋਸ #000; }

nav a: last-child { ਬਾਰਡਰ-ਸੱਜੇ: ਕੋਈ ਨਹੀਂ; }

ਲੇਖਕ ਤੋਂ: ਆਖਰੀ ਵਰਗੇ CSS ਸੂਡੋ-ਚੋਣਕਾਰ ਪ੍ਰਸਤੁਤੀ ਨੂੰ ਮਾਰਕਅੱਪ ਤੋਂ ਵੱਖ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਸੌਖਾ ਤਰੀਕਾ ਹੈ: HTML ਨੂੰ ਉਹਨਾਂ ਕਲਾਸਾਂ ਨਾਲ ਲਿਟਰ ਨਾ ਕਰਨ ਲਈ ਜੋ ਬਲਾਕ ਦੇ ਅੰਦਰਲੇ ਆਖਰੀ ਤੱਤ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ, ਅਤੇ ਜਿਸ ਨੂੰ ਸਾਨੂੰ ਹਿਲਾਉਣਾ ਅਤੇ ਮੁੜ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਜੇਕਰ ਸਮੱਗਰੀ ਬਦਲ ਗਈ ਹੈ, ਤਾਂ ਅਸੀਂ ਇੱਕ ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਮਾਰਕਅੱਪ ਵਿੱਚ ਕੋਈ ਬਦਲਾਅ ਕੀਤੇ ਬਿਨਾਂ ਸਿਰਫ਼ ਆਖਰੀ ਤੱਤ 'ਤੇ ਲਾਗੂ ਹੋਵੇਗਾ।

ਛੰਦ ਵਿੱਚ ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ, ਜਿਵੇਂ ਕਿ ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਜਿੱਥੇ ਇੱਕ ਪਉੜੀ ਵਿੱਚ ਲਾਈਨਾਂ ਦੀ ਗਿਣਤੀ ਪਹਿਲਾਂ ਤੋਂ ਜਾਣੀ ਜਾਂਦੀ ਹੈ।

ਲਾਸਟ-ਆਫ-ਟਾਈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਅਸਲ ਤਰੀਕਾ ਆਖਰੀ ਤੱਤ ਤੋਂ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਨੂੰ ਹਟਾਉਣਾ ਹੈ ਜਦੋਂ ਪ੍ਰਭਾਵ ਸਾਰੇ ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਮੀਨੂ ਬਾਰ:

ਇਸ ਤੋਂ ਵੀ ਬਿਹਤਰ, ਸਟਾਈਲ ਨੂੰ nav a:not(:last-child) { border-right: 1px solid #000; }.

<nav>

    <a href="#">ਘਰ</a>

    <a href="#">ਸਾਡੇ ਬਾਰੇ</a>

    <a href="#">ਉਤਪਾਦ</a>

</nav>

<ਲੇਖ>

  <div>

    <p>ਕਿਨਾਰੇ ਦੇ ਨਾਲ ਬੱਦਲ ਦੀਆਂ ਲਹਿਰਾਂ ਟੁੱਟਦੀਆਂ ਹਨ,</p>

    <p>ਝੀਲ ਦੇ ਪਿੱਛੇ ਦੋਹਰੇ ਸੂਰਜ ਡੁੱਬਦੇ ਹਨ,</p>

    <p>ਪਰਛਾਵੇਂ ਲੰਬੇ ਹੁੰਦੇ ਹਨ</p>

    <p>ਕਾਰਕੋਸਾ ਵਿੱਚ।</p>

  </div>

  <div>

    <p>ਅਜੀਬ ਉਹ ਰਾਤ ਹੈ ਜਿੱਥੇ ਕਾਲੇ ਤਾਰੇ ਚੜ੍ਹਦੇ ਹਨ,</p>

    <p>ਅਤੇ ਅਜੀਬ ਚੰਦ ਅਸਮਾਨ ਵਿੱਚ ਚੱਕਰ ਲਗਾਉਂਦੇ ਹਨ,</p>

    <p>ਪਰ ਅਜਨਬੀ ਅਜੇ ਵੀ ਹੈ</p>

    <p>ਗੁੰਮਿਆ ਕਾਰਕੋਸਾ।</p>

  </div>

</ ਲੇਖ>

…ਫਿਰ ਪੈਰਾਗ੍ਰਾਫ ਹੁਣ ਆਖਰੀ ਤੱਤ ਨਹੀਂ ਰਹੇਗਾ, ਅਤੇ ਨਿਯਮ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ। ਅਜਿਹੇ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਆਖਰੀ ਕਿਸਮ ਦਾ ਸੂਡੋ-ਸਿਲੈਕਟਰ ਮਦਦ ਕਰਦਾ ਹੈ।

ਕੋਰਸ ਕਰੋ ਅਤੇ ਸਿੱਖੋ ਕਿ HTML5 ਅਤੇ CSS3 ਵਿੱਚ ਆਧੁਨਿਕ ਵੈੱਬਸਾਈਟਾਂ ਕਿਵੇਂ ਬਣਾਉਣੀਆਂ ਹਨ

ਜਿਆਦਾ ਜਾਣੋ

ਦੇਖੋ

ਆਖਰੀ-ਆਫ-ਟਾਈਪ ਚੋਣਕਾਰ ਕਿਸੇ ਦਿੱਤੇ ਕਿਸਮ ਦੇ ਤੱਤ ਦੀ ਆਖਰੀ ਮੌਜੂਦਗੀ ਨੂੰ ਲੱਭਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸੋਧਦਾ ਹੈ।

ਲੇਖ p:ਲਾਸਟ-ਚਾਈਲਡ { ਟੈਕਸਟ-ਇੰਡੈਂਟ: 2rem; }

ਸਰੋਤ: //thenewcode.com/

ਪ੍ਰਭਾਵ nth-ਬੱਚੇ 'ਤੇ ਵੀ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਸਾਡੇ ਵਿੱਚੋਂ ਆਖਰੀ: CSS ਵਿੱਚ ਆਖਰੀ-ਬੱਚੇ ਅਤੇ ਆਖਰੀ-ਕਿਸਮ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਲੇਖ p:ਲਾਸਟ-ਆਫ-ਟਾਈਪ { ਟੈਕਸਟ-ਇੰਡੈਂਟ: 2rem; }

ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ ਨਿਯਮ ਆਖਰੀ-ਬੱਚੇ ਦੇ ਰੂਪ ਵਿੱਚ ਸਮੱਗਰੀ 'ਤੇ ਉਹੀ ਪ੍ਰਭਾਵ ਪਾਵੇਗਾ। ਦੋਵੇਂ ਚੋਣਕਾਰ ਦੂਜਿਆਂ ਦੇ ਨਾਲ ਸੁਮੇਲ ਵਿੱਚ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ: ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕ ਕਲਾਸ ਦੀ ਆਖਰੀ ਮੌਜੂਦਗੀ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ।

articlep:nth-child(4){

  ਟੈਕਸਟ-ਇੰਡੈਂਟ:2rem;

}

ਸਟਾਈਲ ਸਿਰਫ ਤਾਂ ਹੀ ਕੰਮ ਕਰਦੇ ਹਨ ਜੇਕਰ ਪੈਰਾਗ੍ਰਾਫ ਅਸਲ ਵਿੱਚ ਬਲਾਕ ਵਿੱਚ ਆਖਰੀ ਪੈਰਾ ਹੈ। ਜੇਕਰ ਹਰੇਕ ਪੈਰਾਗ੍ਰਾਫ ਇੱਕ ਖਿਤਿਜੀ ਪੱਟੀ ਨਾਲ ਖਤਮ ਹੁੰਦਾ ਹੈ:

ਸੰਪਾਦਕੀ: ਵੈਬਫਾਰਮਸੀਲਫ ਟੀਮ।

ਸਕ੍ਰੈਚ ਤੋਂ CSS ਗਰਿੱਡ 'ਤੇ ਸਾਈਟ ਲੇਆਉਟ ਦਾ ਅਭਿਆਸ

ਆਖਰੀ-ਬੱਚੇ ਦੀ ਸਹੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਬੱਚੇ CSS ਦੇ ਨਾਲ ਲੱਗਦੇ ਤੱਤਾਂ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੇ ਹਨ। ਮੰਨ ਲਓ ਕਿ ਸਾਡੇ ਕੋਲ ਹੇਠਾਂ ਦਿੱਤੇ ਮਾਰਕਅੱਪ ਹਨ:

ਅਤੇ ਅਸੀਂ ਪ੍ਰਾਪਤ ਕਰਾਂਗੇ:

<a href="#">ਸੇਵਾਵਾਂ</a>
} ਸ਼ਾਬਦਿਕ ਤੌਰ 'ਤੇ, ਉਪਰੋਕਤ ਇੰਦਰਾਜ਼ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਆਖਦੀ ਹੈ ਕਿ ਆਖਰੀ ਤੱਤ ਨੂੰ ਛੱਡ ਕੇ, <nav> ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਅੰਦਰ ਸਾਰੇ <a> ਲਿੰਕਾਂ ਨੂੰ ਪੈਡ ਕਰਨ ਲਈ। CSS ਚੋਣਕਾਰ : ਨਹੀਂ ਦਾ ਮਤਲਬ "ਸਿਵਾਏ ਸਭ ਕੁਝ" ਹੈ। ਕਲਾਸਾਂ, ਪਛਾਣਕਰਤਾਵਾਂ, ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਅਤੇ ਟੈਗ ਦੇ ਨਾਮ ਬਰੈਕਟਾਂ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਹਨ।

CSS ਸਟਾਈਲ ਨੂੰ ਆਖਰੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ

ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਚੋਣਕਾਰਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ, ਆਓ ਆਪਣੀ ਨੇਵੀਗੇਸ਼ਨ ਪੱਟੀ ਵਿੱਚ ਕੁਝ ਇੰਟਰਐਕਟੀਵਿਟੀ ਜੋੜੀਏ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਅਸੀਂ :hover ਸਟੇਟ ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜੋ ਕਿ ਲੋੜੀਂਦੀ ਸ਼ੈਲੀ ਜੋੜਦੀ ਹੈ ਜਦੋਂ ਮਾਊਸ ਕਰਸਰ ਨੂੰ ਆਬਜੈਕਟ ਉੱਤੇ ਹੋਵਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

<!DOCTYPE html>
		transform: scale(1.03);
			background: rgba(255,255,255,.1);
	nav a:hover{
	<nav>

ਅਸੀਂ ਸਾਰੇ ਤੀਹ ਚੋਣਕਾਰਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਨਹੀਂ ਕਰਾਂਗੇ, ਅਸੀਂ ਸਿਰਫ਼ ਉਹਨਾਂ ਨੂੰ ਹੀ ਲਵਾਂਗੇ ਜਿਨ੍ਹਾਂ ਦਾ ਮਤਲਬ CSS ਵਿੱਚ ਆਖਰੀ ਤੱਤ (: last-child), first (: first-child) ਹੈ। ਅਤੇ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸੂਡੋ-ਕਲਾਸ (:nth-ਬੱਚੇ) 'ਤੇ ਵੀ ਵਿਚਾਰ ਕਰੋ, ਜੋ ਤੁਹਾਨੂੰ ਸੀਰੀਅਲ ਨੰਬਰ ਦੁਆਰਾ ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਅਸੀਂ ਸਾਈਟ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਉਣ ਦੀ ਉਦਾਹਰਣ ਤੋਂ ਸਿੱਖਾਂਗੇ:

<!DOCTYPE html>
		<a href="#">Домой</a>
			color: #fff;
			text-decoration: none;
			justify-content: flex-end;
		nav{
		nav a:not(:last-child){
			margin: 0;
			width: 100%;
nav a:last-child{
		opacity: .8;
		nav a{
			font: bold 15px Arial, sans-serif;
width: 100%;
			background: #000;
border-right: 1px solid red;
			overflow: hidden;

ਕਈ ਵਾਰ ਤੁਸੀਂ ਡਬਲ ਸਪੈਲਿੰਗ (::) ਦੇਖ ਸਕਦੇ ਹੋ। ਇਹ ਨਿਰਧਾਰਨ CSS3 ਵਿੱਚ ::ਬੈਕਡ੍ਰੌਪ, ::ਪਹਿਲਾਂ, ::ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਜੋੜਿਆ ਗਿਆ ਸੀ। ਉਹ ਇਸ ਵਿੱਚ ਭਿੰਨ ਹਨ ਕਿ ਉਹ ਉਹਨਾਂ ਵਸਤੂਆਂ ਵਿੱਚ ਸਟਾਈਲ ਜੋੜਦੇ ਹਨ ਜੋ DOM ਟ੍ਰੀ ਵਿੱਚ ਨਹੀਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਵੱਡੇ ਅੱਖਰ ਜਾਂ ਪਹਿਲੀ ਲਾਈਨ।

p::before{
		}

ਆਮ: nਵਾਂ-ਬੱਚਾ ਚੋਣਕਾਰ

ਇਹ ਚੋਣਕਾਰ ਢਾਂਚਾਗਤ ਸੂਡੋ-ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਇਸਦੇ ਨਾਲ, ਤੁਸੀਂ ਵਸਤੂਆਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਨੰਬਰਿੰਗ ਦੁਆਰਾ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦੇ ਹੋ. ਆਰਡੀਨਲ ਨੰਬਰ ਬਰੈਕਟਾਂ ਵਿੱਚ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਇੱਕ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ CSS ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸੰਕੇਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ:

/*добавит последнему элементу справа границу красного цвета*/
			display: flex;
			padding: 1em;
			color: red;
	nav a:nth-child(3):hover{
	nav a:nth-child(2):hover{
		border-color: #f69;
	<title>Document</title>

nav a:hover ਚੋਣਕਾਰ ਦੀ ਮਦਦ ਨਾਲ, ਅਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਹੈ ਕਿ ਹਰ ਵਾਰ ਕਰਸਰ ਦੇ ਹੋਵਰ ਹੋਣ 'ਤੇ ਲਿੰਕਾਂ ਦੀ ਦਿੱਖ ਬਦਲ ਜਾਂਦੀ ਹੈ। ਇਸ ਲਈ ਉਪਭੋਗਤਾ ਸਾਈਟ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ ਬਹੁਤ ਸੌਖਾ ਅਤੇ ਵਧੇਰੇ ਦਿਲਚਸਪ ਹੋਵੇਗਾ. nav a:nth-child(n) ਐਂਟਰੀ ਵੱਲ ਧਿਆਨ ਦਿਓ। ਇਸਦਾ ਧੰਨਵਾਦ, ਹਰੇਕ ਮੀਨੂ ਆਈਟਮ ਦਾ :ਹੋਵਰ ਸਟੇਟ ਵਿੱਚ ਆਪਣਾ ਅੰਡਰਲਾਈਨ ਰੰਗ ਹੈ।

CSS ਨਾਲ ਆਖਰੀ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਹਾਈਲਾਈਟ ਕਰਨਾ ਹੈ

ਤੁਸੀਂ ਅੱਗੇ ਜਾ ਸਕਦੇ ਹੋ ਅਤੇ <a> ਐਲੀਮੈਂਟਸ ਵਿੱਚ :focus ਅਤੇ :active ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਲਿੰਕਾਂ ਦੇ ਵਿਹਾਰ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ। ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਵੱਖਰੇ ਰੰਗ ਵਿੱਚ ਰੰਗੋ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀ ਵਿੱਚ ਫੌਂਟ ਦਾ ਆਕਾਰ ਵਧਾਓ। CSS ਚੋਣਕਾਰ JavaScript ਦੇ ਸੰਕੇਤ ਦੇ ਬਿਨਾਂ ਸਥਿਰ HTML ਪੰਨਿਆਂ ਨੂੰ ਵੀ ਜੀਵਨ ਵਿੱਚ ਲਿਆਉਂਦੇ ਹਨ।

nav a:nth-child(-1):hover{
display: block;
ਬਾਰਡਰ-ਰੰਗ: #46C5CD;
<a href="#">ਖਬਰਾਂ</a>
</nav>

ਇੱਕ ਵਿਅਕਤੀਗਤ ਵੈਬ ਪੇਜ ਆਬਜੈਕਟ ਨੂੰ ਕਿਵੇਂ ਸਟਾਈਲ ਕਰਨਾ ਹੈ? ਇੱਕ ਕਲਾਸ, ਇੱਕ ਪਛਾਣਕਰਤਾ, ਜਾਂ ਇੱਕ ਟੈਗ ਦਾ ਹਵਾਲਾ ਦੇਣ ਦਾ ਆਮ ਤਰੀਕਾ ਹੈ। ਪਰ ਇਹ ਖਾਕਾ ਹਮੇਸ਼ਾ ਕੰਮ ਨਹੀਂ ਕਰਦਾ। ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਇਹ ਨੇਸਟਡ ਮੀਨੂ, ਹਾਲੀਆ ਸੂਚੀ ਆਈਟਮਾਂ, ਸਰਗਰਮ ਜਾਂ ਵਿਜ਼ਿਟ ਕੀਤੇ ਲਿੰਕਾਂ ਲਈ CSS ਸਟਾਈਲ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ। ਇਹ ਅਜਿਹੇ ਮਾਮਲਿਆਂ ਲਈ ਹੈ ਜੋ ਸੂਡੋ-ਕਲਾਸ ਬਣਾਏ ਗਏ ਸਨ. ਇਹ ਇੱਕ ਖਾਸ ਕਿਸਮ ਦੇ ਚੋਣਕਾਰ ਹਨ ਜੋ ਡਿਵੈਲਪਰ ਦੇ ਦਿਮਾਗੀ ਪ੍ਰਣਾਲੀ ਨੂੰ ਬਚਾਉਂਦੇ ਹਨ ਅਤੇ ਲੇਆਉਟ ਨੂੰ ਬਹੁਤ ਸਰਲ ਬਣਾਉਂਦੇ ਹਨ.

DOM ਅਤੇ CSS ਨਿਯਮਾਂ ਨਾਲ ਆਖਰੀ ਮੀਨੂ ਆਈਟਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕਰਨਾ ਹੈ

ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਸੰਟੈਕਸ ਅਤੇ ਨਿਯਮ

ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਪਛਾਣ ਕੌਲਨ ਹੈ। ਇਹੀ ਨਿਸ਼ਾਨੀ ਉਨ੍ਹਾਂ ਨੂੰ ਆਮ ਚੋਣਕਾਰਾਂ ਤੋਂ ਵੱਖਰਾ ਕਰਦੀ ਹੈ। ਕੋਲਨ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਸਪੇਸ ਦੇ ਸੂਡੋ-ਕਲਾਸ ਦੇ ਨਾਮ ਨਾਲ ਪਾਲਣਾ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਅੰਤ ਵਿੱਚ, ਜੇਕਰ ਲੋੜ ਹੋਵੇ, ਮੁੱਲ ਨੂੰ ਇੱਕ ਪੂਰਨ ਅੰਕ, ਫਾਰਮੂਲਾ, ਜਾਂ ਕੀਵਰਡ ਦੇ ਰੂਪ ਵਿੱਚ ਬਰੈਕਟਾਂ ਵਿੱਚ ਦਰਸਾਇਆ ਗਿਆ ਹੈ।

li:last-child{
nav a:nth-child(-1){
	border-bottom: 1px solid yellow;
	<meta name="viewport" content="width=device-width, initial-scale=1">
			text-transform: uppercase;
			padding-right: 2em;
}

ਪੂਰਨ ਅੰਕ ਮੁੱਲਾਂ ਤੋਂ ਇਲਾਵਾ, :nth-child ਕੀਵਰਡਸ ਨੂੰ ਮੁੱਲਾਂ ਵਜੋਂ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ:

  • ਅਜੀਬ - ਅਜੀਬ ਤੱਤ;
  • even — ਵੀ.

ਹੁਣ, ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਹਰ ਦੂਜੇ ਲਿੰਕ ਉੱਤੇ ਇੱਕ ਪੀਲਾ ਬਾਰਡਰ ਜੋੜਨ ਲਈ, ਬਸ ਲਿਖੋ:

nav a:nth-child(even){

ਨਤੀਜਾ ਚਾਰ ਚਿੱਟੇ ਲਿੰਕਾਂ ਵਾਲਾ ਇੱਕ ਸਧਾਰਨ ਮੀਨੂ ਹੈ. ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਮਦਦ ਨਾਲ, ਅਸੀਂ ਹਰੇਕ ਨੈਵੀਗੇਸ਼ਨ ਆਈਟਮ ਨੂੰ ਚੋਣਵੇਂ ਰੂਪ ਵਿੱਚ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹਾਂ, ਆਕਾਰ ਬਦਲ ਸਕਦੇ ਹਾਂ, ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਰੰਗੀਨ ਬਣਾ ਸਕਦੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, CSS ਵਿੱਚ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਆਖਰੀ ਤੱਤ ਲਾਲ ਹੈ ਅਤੇ ਪਹਿਲਾ ਹਰਾ ਹੈ, ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਦੀ ਲੋੜ ਹੈ:

nav a:first-child{
			transition: all .5s ease-in-out;
padding-bottom: 0;
content: '';
		<a href="#">Блог</a>
color: #222;
			padding: 0;
		border-bottom: 1px solid#D349CE;
		border-color: #3EDC79;
}

ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਸੰਯੁਕਤ ਵਰਤੋਂ

ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਤੁਹਾਨੂੰ ਇੱਕ ਚੋਣਕਾਰ ਵਿੱਚ ਇੱਕ ਵਾਰ ਵਿੱਚ ਕਈ ਸੂਡੋ-ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ। ਇਹ ਪਹੁੰਚ ਉਦੋਂ ਕੰਮ ਆ ਸਕਦੀ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਖਰੀ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੇ CSS ਐਲੀਮੈਂਟਸ ਨੂੰ ਖਾਸ ਸਟਾਈਲ ਦੇਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

nav a:not(:last-child){
		body{
padding-right: 10px;
			color: green;

 

ਇੱਕ ਵਿਅਕਤੀਗਤ ਵੈਬ ਪੇਜ ਆਬਜੈਕਟ ਨੂੰ ਕਿਵੇਂ ਸਟਾਈਲ ਕਰਨਾ ਹੈ? ਇੱਕ ਕਲਾਸ, ਇੱਕ ਪਛਾਣਕਰਤਾ, ਜਾਂ ਇੱਕ ਟੈਗ ਦਾ ਹਵਾਲਾ ਦੇਣ ਦਾ ਆਮ ਤਰੀਕਾ ਹੈ। ਪਰ ਇਹ ਖਾਕਾ ਹਮੇਸ਼ਾ ਕੰਮ ਨਹੀਂ ਕਰਦਾ। ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਇਹ ਨੇਸਟਡ ਮੀਨੂ, ਹਾਲੀਆ ਸੂਚੀ ਆਈਟਮਾਂ, ਸਰਗਰਮ ਜਾਂ ਵਿਜ਼ਿਟ ਕੀਤੇ ਲਿੰਕਾਂ ਲਈ CSS ਸਟਾਈਲ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ। ਇਹ ਅਜਿਹੇ ਮਾਮਲਿਆਂ ਲਈ ਹੈ ਜੋ ਸੂਡੋ-ਕਲਾਸ ਬਣਾਏ ਗਏ ਸਨ. ਇਹ ਇੱਕ ਖਾਸ ਕਿਸਮ ਦੇ ਚੋਣਕਾਰ ਹਨ ਜੋ ਡਿਵੈਲਪਰ ਦੇ ਦਿਮਾਗੀ ਪ੍ਰਣਾਲੀ ਨੂੰ ਬਚਾਉਂਦੇ ਹਨ ਅਤੇ ਲੇਆਉਟ ਨੂੰ ਬਹੁਤ ਸਰਲ ਬਣਾਉਂਦੇ ਹਨ.

DOM ਅਤੇ CSS ਨਿਯਮਾਂ ਨਾਲ ਆਖਰੀ ਮੀਨੂ ਆਈਟਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕਰਨਾ ਹੈ

ਅਸੀਂ ਸਾਰੇ ਤੀਹ ਚੋਣਕਾਰਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਨਹੀਂ ਕਰਾਂਗੇ, ਅਸੀਂ ਸਿਰਫ਼ ਉਹਨਾਂ ਨੂੰ ਹੀ ਲਵਾਂਗੇ ਜਿਨ੍ਹਾਂ ਦਾ ਮਤਲਬ CSS ਵਿੱਚ ਆਖਰੀ ਤੱਤ (: last-child), first (: first-child) ਹੈ। ਅਤੇ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸੂਡੋ-ਕਲਾਸ (:nth-ਬੱਚੇ) 'ਤੇ ਵੀ ਵਿਚਾਰ ਕਰੋ, ਜੋ ਤੁਹਾਨੂੰ ਸੀਰੀਅਲ ਨੰਬਰ ਦੁਆਰਾ ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਅਸੀਂ ਸਾਈਟ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਉਣ ਦੀ ਉਦਾਹਰਣ ਤੋਂ ਸਿੱਖਾਂਗੇ:

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);    		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  		}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

ਨਤੀਜਾ ਚਾਰ ਚਿੱਟੇ ਲਿੰਕਾਂ ਵਾਲਾ ਇੱਕ ਸਧਾਰਨ ਮੀਨੂ ਹੈ. ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਮਦਦ ਨਾਲ, ਅਸੀਂ ਹਰੇਕ ਨੈਵੀਗੇਸ਼ਨ ਆਈਟਮ ਨੂੰ ਚੋਣਵੇਂ ਰੂਪ ਵਿੱਚ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹਾਂ, ਆਕਾਰ ਬਦਲ ਸਕਦੇ ਹਾਂ, ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਰੰਗੀਨ ਬਣਾ ਸਕਦੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, CSS ਵਿੱਚ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਆਖਰੀ ਤੱਤ ਲਾਲ ਹੈ ਅਤੇ ਪਹਿਲਾ ਹਰਾ ਹੈ, ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਦੀ ਲੋੜ ਹੈ:

nav a:first-child{  			color: green;  		}  nav a:last-child{  			color: red;  		}

ਆਮ: nਵਾਂ-ਬੱਚਾ ਚੋਣਕਾਰ

ਇਹ ਚੋਣਕਾਰ ਢਾਂਚਾਗਤ ਸੂਡੋ-ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਇਸਦੇ ਨਾਲ, ਤੁਸੀਂ ਵਸਤੂਆਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਨੰਬਰਿੰਗ ਦੁਆਰਾ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦੇ ਹੋ. ਆਰਡੀਨਲ ਨੰਬਰ ਬਰੈਕਟਾਂ ਵਿੱਚ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਇੱਕ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ CSS ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸੰਕੇਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ:

/*добавит последнему элементу справа границу красного цвета*/  nav a:nth-child(-1){  border-right: 1px solid red;  }

ਪੂਰਨ ਅੰਕ ਮੁੱਲਾਂ ਤੋਂ ਇਲਾਵਾ, :nth-child ਕੀਵਰਡਸ ਨੂੰ ਮੁੱਲਾਂ ਵਜੋਂ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ:

  • ਅਜੀਬ - ਅਜੀਬ ਤੱਤ;
  • even — ਵੀ.

ਹੁਣ, ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਹਰ ਦੂਜੇ ਲਿੰਕ ਉੱਤੇ ਇੱਕ ਪੀਲਾ ਬਾਰਡਰ ਜੋੜਨ ਲਈ, ਬਸ ਲਿਖੋ:

nav a:nth-child(even){  	border-bottom: 1px solid yellow;  }

ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਸੰਯੁਕਤ ਵਰਤੋਂ

ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਤੁਹਾਨੂੰ ਇੱਕ ਚੋਣਕਾਰ ਵਿੱਚ ਇੱਕ ਵਾਰ ਵਿੱਚ ਕਈ ਸੂਡੋ-ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ। ਇਹ ਪਹੁੰਚ ਉਦੋਂ ਕੰਮ ਆ ਸਕਦੀ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਖਰੀ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੇ CSS ਐਲੀਮੈਂਟਸ ਨੂੰ ਖਾਸ ਸਟਾਈਲ ਦੇਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

nav a:not(:last-child){  padding-right: 10px;  }

ਵਰਬੈਟਿਮ, ਉਪਰੋਕਤ ਇੰਦਰਾਜ਼ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਆਖਰੀ ਤੱਤ ਨੂੰ ਛੱਡ ਕੇ, <nav> ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਅੰਦਰ ਸਾਰੇ <a> ਲਿੰਕਾਂ ਨੂੰ ਪੈਡ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ। CSS ਚੋਣਕਾਰ : ਨਹੀਂ ਦਾ ਮਤਲਬ "ਸਿਵਾਏ ਸਭ ਕੁਝ" ਹੈ। ਕਲਾਸਾਂ, ਪਛਾਣਕਰਤਾਵਾਂ, ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਅਤੇ ਟੈਗ ਦੇ ਨਾਮ ਬਰੈਕਟਾਂ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਹਨ।

CSS ਸਟਾਈਲ ਨੂੰ ਆਖਰੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ

ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਚੋਣਕਾਰਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ, ਆਓ ਆਪਣੀ ਨੇਵੀਗੇਸ਼ਨ ਪੱਟੀ ਵਿੱਚ ਕੁਝ ਇੰਟਰਐਕਟੀਵਿਟੀ ਜੋੜੀਏ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਅਸੀਂ :hover ਸਟੇਟ ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜੋ ਕਿ ਲੋੜੀਂਦੀ ਸ਼ੈਲੀ ਜੋੜਦੀ ਹੈ ਜਦੋਂ ਮਾਊਸ ਕਰਸਰ ਨੂੰ ਆਬਜੈਕਟ ਉੱਤੇ ਹੋਵਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);  			overflow: hidden;  		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  			transition: all .5s ease-in-out;  		}  		nav a:not(:last-child){  			padding-right: 2em;  		}    	nav a:hover{  		border-bottom: 1px solid#D349CE;  		transform: scale(1.03);  		opacity: .8;  	}  	nav a:nth-child(2):hover{  		border-color: #46C5CD;  	}  	nav a:nth-child(3):hover{  		border-color: #3EDC79;  	}  	nav a:nth-child(-1):hover{  		border-color: #f69;  	}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

nav a:hover ਚੋਣਕਾਰ ਦੀ ਮਦਦ ਨਾਲ, ਅਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਹੈ ਕਿ ਹਰ ਵਾਰ ਕਰਸਰ ਦੇ ਹੋਵਰ ਹੋਣ 'ਤੇ ਲਿੰਕਾਂ ਦੀ ਦਿੱਖ ਬਦਲ ਜਾਂਦੀ ਹੈ। ਇਸ ਲਈ ਉਪਭੋਗਤਾ ਸਾਈਟ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ ਬਹੁਤ ਸੌਖਾ ਅਤੇ ਵਧੇਰੇ ਦਿਲਚਸਪ ਹੋਵੇਗਾ. nav a:nth-child(n) ਐਂਟਰੀ ਵੱਲ ਧਿਆਨ ਦਿਓ। ਇਸਦਾ ਧੰਨਵਾਦ, ਹਰੇਕ ਮੀਨੂ ਆਈਟਮ ਦਾ :ਹੋਵਰ ਸਟੇਟ ਵਿੱਚ ਆਪਣਾ ਅੰਡਰਲਾਈਨ ਰੰਗ ਹੈ।

CSS ਨਾਲ ਆਖਰੀ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਹਾਈਲਾਈਟ ਕਰਨਾ ਹੈ

ਤੁਸੀਂ ਅੱਗੇ ਜਾ ਸਕਦੇ ਹੋ ਅਤੇ <a> ਐਲੀਮੈਂਟਸ ਵਿੱਚ :focus ਅਤੇ :active ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਲਿੰਕਾਂ ਦੇ ਵਿਹਾਰ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ। ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਵੱਖਰੇ ਰੰਗ ਵਿੱਚ ਰੰਗੋ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀ ਵਿੱਚ ਫੌਂਟ ਦਾ ਆਕਾਰ ਵਧਾਓ। CSS ਚੋਣਕਾਰ JavaScript ਦੇ ਸੰਕੇਤ ਦੇ ਬਿਨਾਂ ਸਥਿਰ HTML ਪੰਨਿਆਂ ਨੂੰ ਵੀ ਜੀਵਨ ਵਿੱਚ ਲਿਆਉਂਦੇ ਹਨ।

</html>
<li>1</li>3.1+

ਸੰਟੈਕਸ

ਛੋਟੀ ਜਾਣਕਾਰੀ

#primer tr:first-child td {ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ:ਲਾਲ; }

ਸਾਰੇ ਤੱਤਾਂ ਲਈ ਇਹ ਇੱਕ ਚੋਣਕਾਰ ਨਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਸੂਡੋ-ਕਲਾਸ ਵੀ ਹੈ ਜਿਸਨੂੰ ਆਖਰੀ-ਚਾਈਲਡ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

</div>

  • ਇੱਕ ਸਮੀਕਰਨ ਜਿਵੇਂ an+b।

<tr>
CSS ਚੋਣਕਾਰ

:nth-last-child(n) ਸੂਡੋ-ਕਲਾਸ ਹਰੇਕ ਤੱਤ ਨੂੰ ਚੁਣਦਾ ਹੈ ਜੋ ਉਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦਾ ਬੱਚਾ ਹੈ (ਆਖਰੀ ਬੱਚੇ ਤੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ)।

ਜੇਕਰ a ਜ਼ੀਰੋ ਹੈ, ਤਾਂ ਇਹ ਨਹੀਂ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸੰਕੇਤ ਨੂੰ ਘਟਾ ਕੇ b ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ b ਜ਼ੀਰੋ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਵੀ ਛੱਡ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਮੀਕਰਨ an ਦੇ ਰੂਪ ਵਿੱਚ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। a ਅਤੇ b ਨੈਗੇਟਿਵ ਨੰਬਰ ਹੋ ਸਕਦੇ ਹਨ, ਜਿਸ ਸਥਿਤੀ ਵਿੱਚ ਪਲੱਸ ਚਿੰਨ੍ਹ ਨੂੰ ਘਟਾਓ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ: 5n-1।

2.1

#primer td:nth-child(3) { ਪਿਛੋਕੜ-ਰੰਗ:ਹਰਾ; }
.ਬਲਾਕ {
CSS3

4.1

<ਲੇਖ>

2n+15.1

a ਅਤੇ b ਲਈ ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ, ਕੁਝ ਨਤੀਜੇ ਨੈਗੇਟਿਵ ਜਾਂ ਜ਼ੀਰੋ ਵੀ ਹੋ ਸਕਦੇ ਹਨ। ਹਾਲਾਂਕਿ, ਤੱਤ ਸਿਰਫ ਸਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੁਆਰਾ ਪ੍ਰਭਾਵਿਤ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਤੱਤ ਸੰਖਿਆ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ।

ਆਪਣਾ ਕੋਡ ਸਿੱਧਾ ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਪੋਸਟ ਨਾ ਕਰੋ, ਇਹ ਸਹੀ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦਾ।

ਸੂਡੋ-ਕਲਾਸ nth-ਆਖਰੀ-ਬੱਚਾ()

ਮੁੱਖ ਪੈਡਿੰਗ ਲਈ ਇੱਕ ਅਧਿਕਾਰਤ ਬੇਨਤੀ ਜਮ੍ਹਾਂ ਕਰਨ ਦਾ ਇੱਕ ਉਦੇਸ਼ ਮੌਕਾ ਹੈ: 10px; /* ਪਾਠ ਦੇ ਦੁਆਲੇ ਹਾਸ਼ੀਏ */

ਉਦਾਹਰਨ ਲਈ, ਆਓ ਉਹੀ ਕੋਡ ਲੈਂਦੇ ਹਾਂ ਜੋ ਪਿਛਲੇ ਨੋਟ ਵਿੱਚ ਹੈ:

 

ਇਸ ਕੰਮ ਲਈ, ਉਦੇਸ਼ ਕਾਰਨਾਂ ਲਈ :nth-last-of-type() ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਹੈ:

td:ਪਹਿਲੀ-ਦੀ-ਕਿਸਮ {

  • ਇੱਕ ਸਮੀਕਰਨ ਜਿਵੇਂ an+b।

 

ਸਾਰੇ ਸਮ ਤੱਤ, ਸਮ ਦੇ ਬਰਾਬਰ।

 

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

ਪੈਰਾਮੀਟਰ ਦੇ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ "an + b" ਵਰਗੇ ਸਮੀਕਰਨ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਜਿੱਥੇ "a" ਅਤੇ "b" ਪੂਰਨ ਅੰਕ ਹਨ, ਅਤੇ "n" ਇੱਕ ਵੇਰੀਏਬਲ ਹੈ ਜੋ ਕ੍ਰਮਵਾਰ 0 ਤੋਂ ਚੋਣਕਾਰ ਤੱਤਾਂ ਦੀ ਸੰਖਿਆ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਸਿਰਫ ਪਹਿਲੀਆਂ ਦੋ ਕਤਾਰਾਂ ਅਤੇ ਹਰ ਚੌਥੇ ਕਾਲਮ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਹਾਈਲਾਈਟ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

 

ਮੁੱਲ

 

:nਵਾਂ-ਆਖਰੀ-ਬੱਚਾ(ਨੰਬਰ) {
p:nth-of-type(2) {
    ਬਾਰਡਰ: 1px ਠੋਸ #333; /* ਫਰੇਮ ਵਿਕਲਪ */
    #primer tr:nth-last-child(1) td:nth-last-child(1) {ਬੈਕਗ੍ਰਾਊਂਡ-ਰੰਗ:ਹਰਾ;}2.1+

<p>ਪਹਿਲਾ ਪੈਰਾ</p>

ਅੰਤ ਤੋਂ ਪੰਜਵਾਂ ਤੱਤ।

 

ਛੋਟੀ ਜਾਣਕਾਰੀ

 

ਸੰਟੈਕਸ

 

ਸੂਚੀ ਦੇ ਆਖਰੀ ਤਿੰਨ ਤੱਤਾਂ ਨੂੰ ਚੁਣਨਾ:

#primer tr:nth-child(1) td:nth-child(1) {ਬੈਕਗ੍ਰਾਊਂਡ-ਰੰਗ:ਲਾਲ;}

CSS 2.1

ਸਫਾਰੀ 

  • ਨੰਬਰ - ਇੱਕ ਖਾਸ ਸੀਰੀਅਲ ਨੰਬਰ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਦੀ ਚੋਣ ਕਰੋ;

li:nth-ਬੱਚਾ(3n+1)

  • "ਵੀ" - ਸਮ ਤੱਤ ਚੁਣੋ;
  • "nth-child" - ਸ਼ੁਰੂ ਤੋਂ ਪੈਰਾਮੀਟਰ ਦੇ ਆਧਾਰ 'ਤੇ ਤੱਤ ਚੁਣਦਾ ਹੈ;

ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ

  • "ਵੀ" - ਸਮ ਤੱਤ ਚੁਣੋ;

<style>
<a href = "https://i1.wp.com/i1.wp.com/ya.ru">ਸਰੋਤ ਸਰੋਤ ਲਿੰਕ</h3>ਪਿਛਲੀ ਪੋਸਟ ਵਿੱਚ, ਅਸੀਂ ਸਿੱਖਿਆ ਕਿ ਇਸ ਵਿੱਚ ਪਹਿਲੇ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਚੁਣਨਾ ਹੈ ਪਹਿਲੇ ਬੱਚੇ ਦੇ ਚੋਣਕਾਰ ਦੇ ਨਾਲ ਮੂਲ ਤੱਤ। ਆਓ ਹੁਣ ਸਿੱਖੀਏ ਕਿ ਪੇਰੈਂਟ ਬਲਾਕ ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਨੂੰ ਕਿਵੇਂ ਚੁਣਨਾ ਹੈ। td:nth-last-child(4) {<td> </td><td>2134</td><td>2135</td>
ਉਚਾਈ: 5px; /* ਬਲਾਕ ਉਚਾਈ */
ਬੈਕਗ੍ਰਾਊਂਡ-ਰੰਗ: ਸਲੇਟੀ;ਬਾਰਡਰ-ਖੱਬੇ: 3px ਡਬਲ #333; /* ਖੱਬਾ ਬਾਰਡਰ */<article> ਪੜ੍ਹਨਾ 3 ਮਿੰਟ। ਵਿਯੂਜ਼ 2 ਪੋਸਟ ਕੀਤੇ ਗਏ"ਪਹਿਲਾ-ਬੱਚਾ" ਅਤੇ "ਆਖਰੀ-ਬੱਚਾ" ਦੇ ਨਾਲ ਤੁਸੀਂ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਪਹਿਲੇ ਜਾਂ ਆਖਰੀ ਤੱਤ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ ਅਤੇ ਰੀਸਟਾਇਲ ਕਰ ਸਕਦੇ ਹੋ। ਆਓ ਦੇਖੀਏ ਕਿ ਇਹ ਇੱਕ ਉਦਾਹਰਣ 'ਤੇ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਪਛਾਣਕਰਤਾ "primer" (id="primer") ਨਾਲ ਟੇਬਲ ਸੈੱਲਾਂ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰੋ।
"ਨਵਾਂ-ਬੱਚਾ" ਸੂਡੋਕਾਸ ਹੋਰ ਦਿਲਚਸਪ ਸੰਭਾਵਨਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ DOM ਟ੍ਰੀ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਆਰਡਰ ਦੇ ਅਧਾਰ ਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਸੂਡੋ-ਕਲਾਸ ਪੈਰਾਮੀਟਰ ਲੈ ਸਕਦਾ ਹੈ:#primer tr:nth-child(odd) td { ਪਿਛੋਕੜ-ਰੰਗ:ਲਾਲ; } p:nth-child(2) { 3.6+

ਆਉ ਦੋਵਾਂ ਵਿਕਲਪਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੀਏ: ਚਿੱਤਰ. 1. <td>ਸਟੋਨਜ਼</td><td>23</td><td>34</td> ਟੇਬਲ ਦੇ ਕਾਲਮਾਂ 'ਤੇ :nth-last-child pseudo-class ਨੂੰ ਲਾਗੂ ਕਰਨਾ, ਸਾਰੇ ਅਜੀਬ ਕਾਲਮਾਂ ਦਾ ਰੰਗ, ਆਖਰੀ (ਚਿੱਤਰ 1) ਨਾਲ ਸ਼ੁਰੂ ਹੋ ਰਿਹਾ ਹੈ।</style>
ਪਿਛੋਕੜ: #eb9; /* ਪਿਛੋਕੜ ਦਾ ਰੰਗ */
ਰੰਗ: #fff; /* ਟੈਕਸਟ ਰੰਗ */td {
<title>ਸੂਡੋ-ਕਲਾਸ :nth-last-of-type() and :nth-last-child()</title>

  • ਨੰਬਰ - ਇੱਕ ਖਾਸ ਸੀਰੀਅਲ ਨੰਬਰ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਦੀ ਚੋਣ ਕਰੋ;

p:nth-last-of-type(2) {
<li>2</li>p:nth-last-of-type(2) { nth-child()
ਉਦਾਹਰਨਾਂ 1. :last-child pseudo-class ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਨਤੀਜਾ
ਪਰ ਕੀ ਫਰਕ ਹੈ? <td>88</td><td>53</td><td>103</td>

  • "ਪਹਿਲਾ ਬੱਚਾ" - ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦਾ ਪਹਿਲਾ ਤੱਤ ਚੁਣਦਾ ਹੈ;

<p>ਦੂਜਾ ਪੈਰਾ</p> ਪਿਛੋਕੜ: #7da7d9; /* ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ */ <tr>

  • "ਪਹਿਲਾ ਬੱਚਾ" - ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦਾ ਪਹਿਲਾ ਤੱਤ ਚੁਣਦਾ ਹੈ;

ਸਾਰਣੀ { <title>ਸੂਡੋ-ਕਲਾਸਾਂ ਅਤੇ ਸੂਡੋ-ਐਲੀਮੈਂਟਸ</title> ਬਾਰਡਰ-ਕੱਲੇਪਸ: collapse; /* ਦੋਹਰੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਹਟਾਓ */ :nth-last-child() ਸੂਡੋ-ਕਲਾਸ ਤੁਹਾਨੂੰ ਨਾ ਸਿਰਫ਼ ਸਮ ਅਤੇ ਅਜੀਬ ਮੁੱਲਾਂ ਨੂੰ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਸਗੋਂ ਇੱਕ ਖਾਸ ਫਾਰਮੂਲੇ ਦੁਆਰਾ ਦਿੱਤੇ ਗਏ ਮੁੱਲਾਂ ਨੂੰ ਵੀ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਨੂੰ ਨਕਾਰਾਤਮਕ ਅਤੇ ਸਕਾਰਾਤਮਕ ਦੋਵਾਂ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਸਿਰਫ ਇੱਕ ਸੰਖਿਆ ਦਰਸਾਉਣ ਦੀ ਆਗਿਆ ਹੈ। ਕੋਡ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ ਅਤੇ ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਇਸ ਦਾ ਲਿੰਕ ਦਿਓ। ਇਸ ਲਈ ਤੁਸੀਂ ਤੁਰੰਤ ਨਤੀਜਾ ਵੇਖੋਗੇ.
ਅਜਿਹਾ ਕਰਨ ਲਈ, ਲੇਖ ਦੀ ਮੁੱਖ ਸਮੱਗਰੀ ਤੋਂ ਬਾਅਦ, ਅਸੀਂ ਪੰਨੇ 'ਤੇ ਇੱਕ ਲਿੰਕ - <a> ਤੱਤ ਰੱਖਦੇ ਹਾਂ।
CSS ਸੂਡੋ-ਕਲਾਸਾਂ ਨੂੰ html ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਿਸੇ ਵੀ ਤੱਤ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
<title>ਲਾਸਟ-ਚਾਈਲਡ</title>li:nth-child(n+3) :ਲਾਸਟ-ਚਾਈਲਡ ਸੂਡੋ-ਕਲਾਸ ਸ਼ੈਲੀ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦਾ ਆਖਰੀ ਤੱਤ ਹੈ।

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਆਖਰੀ ਤੱਤ :ਲਾਸਟ-ਚਾਈਲਡ ਸੂਡੋ-ਕਲਾਸ ਦਾ ਸਮਾਨਾਰਥੀ ਹੈ। 9.6+ ਫਾਇਰਫਾਕਸ https://i1.wp.com/i1.wp.com/www.w3.org/TR/css3-selectors/#nth-last-child-pseudo
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4
3, 2, 1 3, 8, 13, 18, 23
ਅਜੀਬ
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4
5n-2 ਸਾਰੇ ਅਜੀਬ ਤੱਤ, ਅਜੀਬ ਦੇ ਬਰਾਬਰ।

ਵਰਣਨ

ਸਾਰਣੀ ਵਿੱਚ. 1 ਕੁਝ ਸੰਭਾਵੀ ਸਮੀਕਰਨਾਂ ਅਤੇ ਕੀਵਰਡਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਤੱਤ ਨੰਬਰ ਵਰਤੇ ਜਾਣਗੇ।

    • "ਓਡ" - ਅਜੀਬ ਤੱਤ ਚੁਣੋ;
    • 2.0+

td:nth-last-of-type(2n+1) {
#primer td:nth-child(2) { ਪਿਛੋਕੜ-ਰੰਗ: ਲਾਲ; }
ਪਿਛੋਕੜ-ਰੰਗ:ਖਾਕੀ;

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, :nth-last-child() ਸੂਡੋ-ਕਲਾਸ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਚੁਣਦਾ ਹੈ ਜੇਕਰ ਇਹ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਹੈ ਅਤੇ ਇਹ ਉਸੇ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦਾ ਦੂਜਾ ਤੱਤ ਹੈ ( ਆਖਰੀ ਬੱਚੇ ਤੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ )।

CSS ਦੀ ਤੀਜੀ ਪੀੜ੍ਹੀ ਨੇ ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਧਾਰਨਾ ਨੂੰ ਲੇਆਉਟ ਵਿੱਚ ਲਿਆਂਦਾ। ਅੱਜ ਅਸੀਂ ਪਹਿਲੇ ਬੱਚੇ, ਆਖਰੀ ਬੱਚੇ ਅਤੇ ਨੌਵੇਂ ਬੱਚੇ ਬਾਰੇ ਗੱਲ ਕਰਾਂਗੇ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਸੂਚੀ ਦੇ ਪਹਿਲੇ ਜਾਂ ਆਖਰੀ ਤੱਤ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੀਸਟਾਇਲ ਕਰ ਸਕਦੇ ਹੋ, ਸਾਰਣੀ ਦੀ ਦੂਜੀ ਕਤਾਰ ਦਾ ਰੰਗ ਬਦਲ ਸਕਦੇ ਹੋ, ਜਾਂ ਸਾਰਣੀ ਦੇ ਪਹਿਲੇ ਪੰਜ ਸੈੱਲਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰ ਸਕਦੇ ਹੋ। ਅਤੇ ਇਹ ਸਭ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ.

ਸੂਡੋ-ਕਲਾਸ : ਆਖਰੀ ਬੱਚਾ | htmlbook.ru

:nth-last-child pseudo-class ਦੀ ਵਰਤੋਂ ਐਲੀਮੈਂਟ ਟ੍ਰੀ ਵਿੱਚ ਨੰਬਰਿੰਗ ਦੇ ਆਧਾਰ 'ਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। :nth-child pseudo-class ਦੇ ਉਲਟ, ਇਹ ਪਹਿਲੇ ਤੱਤ ਤੋਂ ਨਹੀਂ, ਪਰ ਆਖਰੀ ਤੋਂ ਗਿਣਦਾ ਹੈ।

<td>ਸੋਨਾ</td><td>4</td><td>69</td>
<title>ਨਵੀਂ-ਆਖਰੀ-ਕਿਸਮ</title>

<td>62</td><td>74</td><td>57</td>
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: ਚੂਨਾ; ਹੈਰਾਨੀ ਦੀ ਗੱਲ ਨਹੀਂ, ਦੋਵੇਂ ਚੋਣਕਾਰ ਇਸ ਕੰਮ ਲਈ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਪਹਿਲੇ ਪੈਰੇ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦੇ ਹਨ।<div>

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 2, 4, 6, 8, 10 ਸਾਰੇ ਅਜੀਬ ਤੱਤ।

ਪੈਰਾਮੀਟਰ ਦੇ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ "an + b" ਵਰਗੇ ਸਮੀਕਰਨ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਜਿੱਥੇ "a" ਅਤੇ "b" ਪੂਰਨ ਅੰਕ ਹਨ, ਅਤੇ "n" ਇੱਕ ਵੇਰੀਏਬਲ ਹੈ ਜੋ ਕ੍ਰਮਵਾਰ 0 ਤੋਂ ਚੋਣਕਾਰ ਤੱਤਾਂ ਦੀ ਸੰਖਿਆ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਸਿਰਫ ਪਹਿਲੀਆਂ ਦੋ ਕਤਾਰਾਂ ਅਤੇ ਹਰ ਚੌਥੇ ਕਾਲਮ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਹਾਈਲਾਈਟ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

#primer tr:last-child td {ਬੈਕਗ੍ਰਾਊਂਡ-ਰੰਗ:ਹਰਾ; }
#primer td:nth-child(4n+4) { ਪਿਛੋਕੜ-ਰੰਗ:ਲਾਲ; }

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8

ਸੂਚੀ ਦੇ ਸਿਰਫ ਪਹਿਲੇ ਤਿੰਨ ਤੱਤ ਚੁਣਨਾ:

ਸੰਟੈਕਸ ਇੱਥੇ ਸਮਾਨ ਹੈ:

    • ਨਿਰਧਾਰਨ ਲਈ ਲਿੰਕ

#primer tr:nth-child(-n+2) td { ਪਿਛੋਕੜ-ਰੰਗ:ਲਾਲ; }

:nth-last-of-type() ਚੋਣਕਾਰ ਅਜੇ ਵੀ ਬਿਨਾਂ ਕਿਸੇ ਬਦਲਾਅ ਦੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ :nth-last-child() ਚੋਣਕਾਰ ਨੇ ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਰਸਬੇਰੀਆਂ ਨੂੰ ਖਰਾਬ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਅਸਲ ਵਿੱਚ ਇੱਕ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦੇ ਦੂਜੇ ਤੱਤ ਨੂੰ ਚੁਣਦਾ ਹੈ ( ਆਖਰੀ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ) , ਅਤੇ ਇਹ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ, ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਦੇ ਜੋੜ ਨਾਲ, ਦੂਜਾ ਪੈਰਾ ਬਣ ਗਿਆ ਹੈ।

:nth-last-of-type() ਅਤੇ :nth-last-child() ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਨ।

ਆਖਰਕਾਰ ਕੀ ਬਦਲੇਗਾ?

<ਟੇਬਲ>
ਚੌੜਾਈ: 100%; /* ਸਾਰਣੀ ਚੌੜਾਈ */

HTML5CSS3IECrOpSaFx

<td>ਤੇਲ</td><td>16</td><td>34</td>
td:not(:first-of-type) {
ਘੋਸ਼ਣਾ ਬਲਾਕ;

ਅਸੀਂ ਸਮਝਣਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹਾਂ। ਆਉ ਸਮ ਅਤੇ ਅਜੀਬ ਕਤਾਰਾਂ ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਸੈਟ ਕਰਨ ਲਈ ਸਾਰਣੀ ਵਿੱਚ ਇੱਕ ਸ਼ੈਲੀ ਲਾਗੂ ਕਰੀਏ:

ਸੂਚੀ ਦੇ ਸਿਰਫ ਪਹਿਲੇ ਤਿੰਨ ਤੱਤ ਚੁਣਨਾ:

    • ਓਪੇਰਾ

#primer tr:nth-child(Even) td {ਬੈਕਗ੍ਰਾਊਂਡ-ਰੰਗ:ਹਰਾ; }

:last-child pseudo -class ਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਸੂਚੀਆਂ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ
ਸੂਚੀ ਤੱਤ ਨੂੰ ਬਾਰਡਰ-ਤਲ 'ਤੇ ਸੈੱਟ ਕਰਦੇ ਹੋ: 3px ਠੋਸ ਕਾਲਾ; ਫਿਰ ਨਤੀਜੇ ਵਜੋਂ, ਸੂਚੀ ਬਣਾਉਣ ਵਾਲੇ ਸਾਰੇ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂ ਦੇ ਹੇਠਾਂ ਤਿੰਨ ਪਿਕਸਲ ਦੀ ਮੋਟਾਈ ਵਾਲੀ ਇੱਕ ਠੋਸ ਕਾਲੀ ਲਾਈਨ ਦਿਖਾਈ ਦੇਵੇਗੀ। ਸੁਹਜ ਦੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਤੋਂ, ਬਾਰਡਰ-ਬੋਟਮ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਜ਼ੀਰੋ 'ਤੇ ਸੈੱਟ ਕਰਕੇ li:last-child ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਖਰੀ ਅੰਡਰਲਾਈਨ ਨੂੰ ਹਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

    • 3n+2
li:nth-child(-n+3)
    • CSS 3

<td>72</td><td>56</td><td>47</td>
</tr>

    • 2, 5, 8, 11, 14 ਆਈਟਮ ਨੰਬਰ

ਪਿਛੋਕੜ-ਰੰਗ: ਸੰਤਰੀ;
</ ਲੇਖ>

ਸਾਨੂੰ p:nth-last-child(2) ਜਾਂ p:nth-last-of-type(2) ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਚੋਣ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਰਿਹਾ ਹੈ।

    • 3.1

ਉਪਰੋਕਤ ਜਾਣਕਾਰੀ ਨੂੰ ਸਮਝਣ ਦੀ ਤੁਹਾਡੀ ਯੋਗਤਾ ਦੇ ਅੰਤ 'ਤੇ, ਤੁਸੀਂ

    • 1.0+

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, :nth-last-of-type pseudo-class ਦੀ ਵਰਤੋਂ ਆਖ਼ਰੀ ਇੱਕ (ਚਿੱਤਰ 1) ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਸਾਰੇ ਅਜੀਬ-ਸੰਖਿਆ ਵਾਲੇ ਕਾਲਮਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਟੇਬਲ ਕਾਲਮਾਂ 'ਤੇ :nਵੀਂ-ਆਖਰੀ-ਕਿਸਮ ਦੀ ਸੂਡੋ-ਕਲਾਸ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਚੌਲ. 1. ਸਾਰਣੀ ਦੇ ਕਾਲਮਾਂ 'ਤੇ :nth-last-of-type pseudo-class ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਨਿਰਧਾਰਨ?

ਨਿਰਧਾਰਨ

ਹਰੇਕ ਨਿਰਧਾਰਨ ਪ੍ਰਵਾਨਗੀ ਦੇ ਕਈ ਪੜਾਵਾਂ ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ।

    • ਸਿਫਾਰਸ਼ - ਨਿਰਧਾਰਨ ਨੂੰ W3C ਦੁਆਰਾ ਮਨਜ਼ੂਰ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਇੱਕ ਮਿਆਰੀ ਵਜੋਂ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਗਈ ਹੈ।
    • ਉਮੀਦਵਾਰ ਦੀ ਸਿਫ਼ਾਰਸ਼ - ਮਿਆਰ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਸਮੂਹ ਸੰਤੁਸ਼ਟ ਹੈ ਕਿ ਇਹ ਆਪਣੇ ਟੀਚਿਆਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ, ਪਰ ਵਿਕਾਸਕਾਰ ਭਾਈਚਾਰੇ ਨੂੰ ਮਿਆਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਮਦਦ ਦੀ ਲੋੜ ਹੈ।
    • ਪ੍ਰਸਤਾਵਿਤ ਸਿਫਾਰਿਸ਼ - ਇਸ ਸਮੇਂ, ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅੰਤਿਮ ਪ੍ਰਵਾਨਗੀ ਲਈ W3C ਸਲਾਹਕਾਰ ਬੋਰਡ ਨੂੰ ਸੌਂਪਿਆ ਜਾਂਦਾ ਹੈ।
    • ਵਰਕਿੰਗ ਡਰਾਫਟ - ਕਮਿਊਨਿਟੀ ਸਮੀਖਿਆ ਲਈ ਚਰਚਾ ਅਤੇ ਸੋਧਾਂ ਤੋਂ ਬਾਅਦ ਡਰਾਫਟ ਦਾ ਇੱਕ ਹੋਰ ਪਰਿਪੱਕ ਸੰਸਕਰਣ।
    • ਸੰਪਾਦਕ ਦਾ ਡਰਾਫਟ - ਪ੍ਰੋਜੈਕਟ ਸੰਪਾਦਕਾਂ ਦੁਆਰਾ ਸੰਸ਼ੋਧਨ ਤੋਂ ਬਾਅਦ ਇੱਕ ਮਿਆਰ ਦਾ ਇੱਕ ਡਰਾਫਟ ਸੰਸਕਰਣ।
    • ਡਰਾਫਟ (ਡਰਾਫਟ ਨਿਰਧਾਰਨ) - ਸਟੈਂਡਰਡ ਦਾ ਪਹਿਲਾ ਡਰਾਫਟ ਸੰਸਕਰਣ।

×

ਬ੍ਰਾਊਜ਼ਰ

ਬ੍ਰਾਊਜ਼ਰ ਟੇਬਲ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੀ ਨੋਟੇਸ਼ਨ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।

    •  - ਸੰਪੱਤੀ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਸਾਰੇ ਵੈਧ ਮੁੱਲਾਂ ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਹੈ;
    •  - ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਸੰਪੱਤੀ ਨੂੰ ਨਹੀਂ ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਂਦਾ ਹੈ;
    •  — ਓਪਰੇਸ਼ਨ ਦੌਰਾਨ ਵੱਖ-ਵੱਖ ਤਰੁਟੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਜਾਂ ਸੰਪੱਤੀ ਸਿਰਫ਼ ਅੰਸ਼ਕ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਸਾਰੇ ਵੈਧ ਮੁੱਲ ਵੈਧ ਨਹੀਂ ਹਨ ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਸਾਰੇ ਤੱਤਾਂ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।

ਨੰਬਰ ਉਸ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸ ਤੋਂ ਸੰਪੱਤੀ ਸਮਰਥਿਤ ਹੈ।

×

ਲੇਖਕ ਅਤੇ ਸੰਪਾਦਕ

ਲੇਖਕ: Vlad Merzhevich

ਪਿਛਲੀ ਵਾਰ ਸੋਧਿਆ ਗਿਆ: 08/06/2018

ਸੰਪਾਦਕ: Vlad Merzhevich


CSS ਗਰਿੱਡ 'ਤੇ ਵੈੱਬਸਾਈਟ ਲੇਆਉਟ 'ਤੇ ਕੋਰਸ

ਸੂਡੋ-ਕਲਾਸ :nth-ਆਖਰੀ-ਬੱਚਾ() | CSS ਹਵਾਲਾ

    • ਲਾਗੂ ਹੁੰਦਾ ਹੈ

ਇਹ "nth-ਆਖਰੀ-ਬੱਚੇ" ਸੂਡੋ-ਕਲਾਸ ਨੂੰ ਪਾਰਸ ਕਰਨਾ ਬਾਕੀ ਹੈ। "nth-child" ਤੋਂ ਇਸਦਾ ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਪੂਰੀ ਕਾਉਂਟਡਾਊਨ ਚੋਣਕਾਰ ਦੇ ਅੰਤ ਤੋਂ ਆਉਂਦੀ ਹੈ। ਇੱਕ ਉਦਾਹਰਨ ਸਥਿਤੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਸਾਰਣੀ "TOTAL" ਵਿੱਚ ਇੱਕ ਸੈੱਲ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਆਖਰੀ ਕਤਾਰ ਦਾ ਆਖਰੀ ਸੈੱਲ ਹੈ:

      • "ਨਵਾਂ-ਆਖਰੀ ਬੱਚਾ" - ਉਹੀ, ਪਰ ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।

ਸੂਡੋ-ਕਲਾਸ ਲਾਸਟ-ਚਾਈਲਡ - ਕੋਡ ਵਿੱਚ ਸਥਾਨ ਦੇ ਕ੍ਰਮ ਵਿੱਚ, ਆਖਰੀ ਨੂੰ ਚੁਣਦਾ ਹੈ, ਚਾਈਲਡ ਐਲੀਮੈਂਟ, ਜੋ ਕਿ ਮੂਲ ਤੱਤ ਵਿੱਚ ਸਥਿਤ ਹੈ।

ਮਹੱਤਤਾ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ

<p>ਪਹਿਲਾ ਪੈਰਾ</p>

    • 9.0+

ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਨੰਬਰ ਨੂੰ nth-child() ਦੇ ਪੈਰਾਮੀਟਰ ਦੇ ਤੌਰ 'ਤੇ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਉਹਨਾਂ ਦੇ ਆਰਡੀਨਲ ਨੰਬਰ ਦੁਆਰਾ ਤੱਤ ਚੁਣ ਸਕਦੇ ਹੋ:

"ਨਵਾਂ-ਬੱਚਾ" ਸੂਡੋਕਾਸ ਹੋਰ ਦਿਲਚਸਪ ਸੰਭਾਵਨਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ DOM ਟ੍ਰੀ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਆਰਡਰ ਦੇ ਅਧਾਰ ਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਸੂਡੋ-ਕਲਾਸ ਪੈਰਾਮੀਟਰ ਲੈ ਸਕਦਾ ਹੈ:

ਬਾਰਡਰ-ਸਪੇਸਿੰਗ: 0; /* ਸੈੱਲਾਂ ਵਿਚਕਾਰ ਵਿੱਥ */
<style type = "text/css">

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਨੰਬਰ ਨੂੰ nth-child() ਦੇ ਪੈਰਾਮੀਟਰ ਦੇ ਤੌਰ 'ਤੇ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਉਹਨਾਂ ਦੇ ਆਰਡੀਨਲ ਨੰਬਰ ਦੁਆਰਾ ਤੱਤ ਚੁਣ ਸਕਦੇ ਹੋ:

ਮੁੱਲ

ਤੱਤ ਚੁਣਨ ਲਈ CSS ਵਿੱਚ ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

css ਆਖਰੀ ਸੂਚੀ ਤੱਤ | ਵਿੰਡੋਜ਼ 10 ਬਾਰੇ ਸਭ ਕੁਝ

ਸੂਚੀ ਦੇ ਹਰ ਤੀਜੇ ਤੱਤ ਨੂੰ ਚੁਣਨਾ:

css ਆਖਰੀ ਕਲਾਸ ਤੱਤ | ਵਿੰਡੋਜ਼ 10 ਬਾਰੇ ਸਭ ਕੁਝ

4 ਮਿੰਟ ਪੜ੍ਹਨਾ। ਵਿਯੂਜ਼ 2 ਪੋਸਟ ਕੀਤੇ ਗਏ

2 ਐਨ

<!DOCTYPE html>
<li>4</li>
    • "ਆਖਰੀ-ਬੱਚਾ" - ਮਾਤਾ-ਪਿਤਾ ਦੇ ਆਖਰੀ ਤੱਤ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ;

 

ਮੰਨ ਲਓ ਕਿ ਸਾਡੇ ਕੋਲ ਇੱਕ ਲੇਖ ਹੈ ਜਿਸ ਵਿੱਚ ਦੋ ਪੈਰੇ ਹਨ ਅਤੇ ਅਸੀਂ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਨੂੰ ਖਾਕੀ (ਬਹੁਤ ਮੁਸ਼ਕਲ ਤਰੀਕੇ ਨਾਲ...) ਵਿੱਚ ਸੈੱਟ ਕਰਕੇ ਪਹਿਲੇ ਪੈਰੇ ਨੂੰ ਦੂਜੇ ਤੋਂ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ:

 

CSS ਸੰਸਕਰਣ

CSS ਚੋਣਕਾਰ

 

CSS 2 

ਸੂਡੋ-ਕਲਾਸ nth-ਆਖਰੀ-ਬੱਚਾ()

 

ਕਰੋਮ 

iOS "ਪਹਿਲੇ-ਬੱਚੇ" ਅਤੇ "ਆਖਰੀ-ਬੱਚੇ" ਦੇ ਨਾਲ ਤੁਸੀਂ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦੇ ਪਹਿਲੇ ਜਾਂ ਆਖਰੀ ਤੱਤ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ ਅਤੇ ਰੀਸਟਾਇਲ ਕਰ ਸਕਦੇ ਹੋ। ਆਓ ਦੇਖੀਏ ਕਿ ਇਹ ਇੱਕ ਉਦਾਹਰਣ 'ਤੇ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਪਛਾਣਕਰਤਾ "ਪ੍ਰਾਈਮਰ" ( ) ਨਾਲ ਟੇਬਲ ਸੈੱਲਾਂ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰੋ।

.ਬਲਾਕ :ਪਹਿਲਾ ਬੱਚਾ {

HTML5 CSS3 IE Cr Op Sa Fx

<div>

ਪਿਛੋਕੜ ਦਾ ਰੰਗ: ਖਾਕੀ nth-child() ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਉਦਾਹਰਨ td
:nth-last-child(2) { ਸੂਡੋ-ਕਲਾਸ nth- last-child()
1. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, :last-child pseudo-class ਦੀ ਵਰਤੋਂ ਕਲਾਸ ਨਾਮ ਬਲਾਕ ਦੇ ਨਾਲ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਸਥਿਤ ਆਖਰੀ <div> ਟੈਗ ਦੀ ਸ਼ੈਲੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਨਾਲ ਨਵੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਬਲਾਕ ਦੇ ਹੇਠਾਂ ਇੱਕ ਰੰਗਦਾਰ ਪੱਟੀ ਬਣਾਉਣਾ ਸੰਭਵ ਹੋ ਗਿਆ।

ਅਸੀਂ ਸਮਝਣਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹਾਂ। ਆਉ ਬੈਕਗਰਾਊਂਡ ਨੂੰ ਬਰਾਬਰ ਅਤੇ ਅਜੀਬ ਕਤਾਰਾਂ 'ਤੇ ਸੈੱਟ ਕਰਨ ਲਈ ਟੇਬਲ 'ਤੇ ਇੱਕ ਸ਼ੈਲੀ ਲਾਗੂ ਕਰੀਏ: nth-child()
ਅਤੇ :nth-last-of-type() ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਜੇਕਰ ਇਹ ਉਸੇ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦਾ ਦੂਜਾ ਪੈਰਾਗ੍ਰਾਫ ਹੈ ( ਆਖਰੀ ਬੱਚੇ ਤੋਂ ਗਿਣਨਾ ।<p> ਦੂਜਾ ਪੈਰਾ</p>ਇਸ ਸਮੇਂ ਸਭ ਕੁਝ ਸਾਡੇ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਸਾਨੂੰ ਯਾਦ ਹੈ ਕਿ ਲੇਖ ਵਿੱਚ ਤੁਹਾਨੂੰ ਸਰੋਤ ਲਈ ਇੱਕ ਲਿੰਕ ਦੇਣ ਦੀ ਲੋੜ ਹੈ। td:nth-last-child(2n +1) { element:last-child { … }
CSS ਸੰਟੈਕਸ :
ਇਹ "nth-last-child" ਸੂਡੋ-ਕਲਾਸ ਨੂੰ ਪਾਰਸ ਕਰਨਾ ਬਾਕੀ ਹੈ। "nth-child" ਤੋਂ ਇਸਦਾ ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਪੂਰੀ ਕਾਉਂਟਡਾਊਨ ਚੋਣਕਾਰ ਦੇ ਅੰਤ ਤੋਂ ਆਉਂਦੀ ਹੈ। ਇੱਕ ਉਦਾਹਰਨ ਸਥਿਤੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਸਾਰਣੀ "TOTAL" ਵਿੱਚ ਇੱਕ ਸੈੱਲ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਆਖਰੀ ਲਾਈਨ ਦਾ ਆਖਰੀ ਸੈੱਲ ਹੈ:
ਸੂਡੋ-ਕਲਾਸ :nth-last-of-type | css | ਵੈੱਬ ਹਵਾਲਾ:nth-last-of-type pseudo-class ਦੀ ਵਰਤੋਂ ਐਲੀਮੈਂਟ ਟ੍ਰੀ ਵਿੱਚ ਨੰਬਰਿੰਗ ਦੇ ਆਧਾਰ 'ਤੇ ਖਾਸ ਕਿਸਮ ਦੇ ਤੱਤਾਂ ਨੂੰ ਸ਼ੈਲੀ ਦੇਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। :nth-of-type pseudo-class ਦੇ ਉਲਟ, ਕਾਊਂਟਡਾਊਨ ਪਹਿਲੇ ਤੱਤ ਤੋਂ ਨਹੀਂ, ਪਰ ਆਖਰੀ ਤੋਂ ਹੈ। ਸੰਟੈਕਸ? <td>79</td><td>34</td><td>86</td> <td>2136</td><td>2137</td><td>2138</td ਵਰਤਣ ਦੀ ਉਦਾਹਰਨ >

  • "ਨਵਾਂ-ਆਖਰੀ ਬੱਚਾ" - ਉਹੀ, ਪਰ ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।

CSS ਸੂਡੋ-ਕਲਾਸਾਂ ਨੂੰ ਇੱਕ html ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਿਸੇ ਵੀ ਤੱਤ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ..block :last-child { background: #f0f0f0; /* ਪਿਛੋਕੜ ਦਾ ਰੰਗ */

  • "ਆਖਰੀ-ਬੱਚਾ" - ਮਾਤਾ-ਪਿਤਾ ਦੇ ਆਖਰੀ ਤੱਤ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ;

ਸਥਾਨਕ ਵਰਚੁਅਲ ਬ੍ਰਹਿਮੰਡ ਦੇ ਅਧੀਨ। 1, 3, 5, 7, 9
Селектор:nth-last-of-type(odd | even | <число> | <выражение>) {...}ਚਿੰਨ੍ਹ × ਮੁੱਲoddਸਾਰੇ ਅਜੀਬ ਤੱਤ ਨੰਬਰ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਸਾਰੇ ਸਮ ਤੱਤ ਨੰਬਰ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ।<number>ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅਨੁਸਾਰੀ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਦੀ ਆਰਡੀਨਲ ਸੰਖਿਆ। ਨੰਬਰਿੰਗ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ, ਜੋ ਕਿ ਸੂਚੀ ਦੇ ਆਖਰੀ ਤੱਤ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।<expression>an±b ਦੇ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿੱਥੇ a ਅਤੇ b ਪੂਰਨ ਅੰਕ ਹਨ, ਅਤੇ n ਇੱਕ ਕਾਊਂਟਰ ਹੈ ਜੋ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ 0, 1, 2,…ਜੇਕਰ ਮੁੱਲ ਲੈਂਦਾ ਹੈ। ਜ਼ੀਰੋ ਹੈ, ਫਿਰ ਇਹ ਨਹੀਂ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਐਂਟਰੀ ਨੂੰ ਘਟਾ ਕੇ b ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ b ਜ਼ੀਰੋ ਹੈ, ਤਾਂ ਇਹ ਵੀ ਨਹੀਂ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਮੀਕਰਨ an ਦੇ ਰੂਪ ਵਿੱਚ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। a ਅਤੇ b ਨੈਗੇਟਿਵ ਨੰਬਰ ਹੋ ਸਕਦੇ ਹਨ, ਜਿਸ ਸਥਿਤੀ ਵਿੱਚ ਪਲੱਸ ਚਿੰਨ੍ਹ ਨੂੰ ਘਟਾਓ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ: 5n-1। a ਅਤੇ b ਲਈ ਨੈਗੇਟਿਵ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ, ਕੁਝ ਨਤੀਜੇ ਵੀ ਨੈਗੇਟਿਵ ਜਾਂ ਜ਼ੀਰੋ ਦੇ ਬਰਾਬਰ ਹੋ ਸਕਦੇ ਹਨ। . ਹਾਲਾਂਕਿ, ਤੱਤ ਸਿਰਫ ਇਸ ਤੱਥ ਦੇ ਕਾਰਨ ਸਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੁਆਰਾ ਪ੍ਰਭਾਵਿਤ ਹੁੰਦੇ ਹਨ ਕਿ ਤੱਤਾਂ ਦੀ ਸੰਖਿਆ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ। ਸਾਰਣੀ ਵਿੱਚ। 1 ਕੁਝ ਸੰਭਾਵੀ ਸਮੀਕਰਨਾਂ ਅਤੇ ਕੀਵਰਡਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਤੱਤ ਨੰਬਰ ਵਰਤੇ ਜਾਣਗੇ। ਕਾਊਂਟਡਾਊਨ ਆਖਰੀ ਤੱਤ ਤੋਂ ਹੈ।CSS ਵਿੱਚ :nth-last-child() pseudo-class ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਨ। ਆਉ :nth-last-child ਅਤੇ :nth-last-of-type() ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਸਮਝਣ ਲਈ ਇੱਕ ਹੋਰ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਉਦਾਹਰਨ ਵੇਖੀਏ। ਸੂਚੀ ਦੇ ਆਖਰੀ ਤਿੰਨ ਤੱਤਾਂ ਨੂੰ ਚੁਣਨਾ: ਟੈਬ. 1. ਵੱਖ-ਵੱਖ ਪੈਡਿੰਗ ਸੂਡੋ-ਕਲਾਸ ਮੁੱਲਾਂ ਲਈ ਨਤੀਜਾ: 3px; /* ਸੈੱਲਾਂ ਵਿੱਚ ਖੇਤਰ */</table>ਬੈਕਗ੍ਰਾਊਂਡ: #dda458 url(images/line.png) repeat-x; /* ਪਿਛੋਕੜ ਸੈਟਿੰਗਾਂ */ cssdeck.com ਜਾਂ jsfiddle.net, CSS ਸੰਸਕਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ :ਲਾਸਟ-ਚਾਈਲਡ ਸੂਡੋ-ਕਲਾਸ ਭੈਣ-ਭਰਾ ਤੱਤਾਂ ਦੇ ਸਮੂਹ ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਦੀ ਸ਼ੈਲੀ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ (ਜਿਨ੍ਹਾਂ ਦੇ ਮਾਤਾ-ਪਿਤਾ ਇੱਕੋ ਹਨ)।<!DOCTYPE html>
<td>Дерево</td><td>7</td><td>73</td>


ਚੋਣਕਾਰ ਤੋਂ ਬਿਨਾਂ :ਲਾਸਟ-ਚਾਈਲਡ ਸੂਡੋ-ਕਲਾਸ <article> ਦੇ ਅੰਦਰਲੇ ਸਾਰੇ ਆਖਰੀ ਤੱਤਾਂ ਨੂੰ ਚੁਣੇਗਾ ਅਤੇ ਉਹਨਾਂ ਦੇ ਟੈਕਸਟ ਦਾ ਰੰਗ ਲਾਲ ਕਰ ਦੇਵੇਗਾ। ਇੱਥੇ <p> ਅਤੇ <time> ਆਖਰੀ ਆਉਂਦੇ ਹਨ ਅਤੇ ਉਹ ਚੁਣੇ ਜਾਣਗੇ।

:last-child ਵਿੱਚ ਇੱਕ ਚੋਣਕਾਰ ਨੂੰ ਜੋੜਦੇ ਸਮੇਂ, ਆਖਰੀ ਤੱਤ ਪਹਿਲਾਂ ਲਿਆ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਇਹ ਵੇਖਦਾ ਹੈ ਕਿ ਇਹ ਕਿਸ ਕਿਸਮ ਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਤੱਤ ਨਿਰਧਾਰਤ ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਚੁਣਿਆ ਜਾਵੇਗਾ। ਇਸ ਤਰ੍ਹਾਂ, ਇੱਕ ਤੱਤ ਚੁਣਿਆ ਜਾਂਦਾ ਹੈ ਜੇਕਰ ਇਹ ਇੱਕੋ ਸਮੇਂ ਦੋ ਸ਼ਰਤਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ: ਇਹ ਆਖਰੀ ਤੱਤ ਹੈ ਅਤੇ ਇਹ ਨਿਰਧਾਰਤ ਕਿਸਮ ਦਾ ਇੱਕ ਤੱਤ ਹੈ। ਇੱਥੇ ਪੈਰੇ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ, ਕਿਉਂਕਿ ਆਖਰੀ ਇੱਕ <p> ਹੈ।

ਜੇਕਰ p ਦੀ ਬਜਾਏ ਕੋਈ ਹੋਰ ਚੋਣਕਾਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਕੁਝ ਵੀ ਨਹੀਂ ਚੁਣਿਆ ਜਾਵੇਗਾ, ਕਿਉਂਕਿ "ਆਖਰੀ ਐਲੀਮੈਂਟ <h2>" ਦੀ ਸ਼ਰਤ ਪੂਰੀ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।

ਕਿਸੇ ਖਾਸ ਕਿਸਮ ਦੇ ਆਖਰੀ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ, :last-of-type pseudo-class ਦੀ ਵਰਤੋਂ ਕਰੋ।

:last-child:nth-last-child(1) ਦੀ ਬਜਾਏ ਸਵੀਕਾਰਯੋਗ ਹੈ।

ਉਦਾਹਰਨ ਦਾ ਨਤੀਜਾ ਚਿੱਤਰ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ. 1. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, :last-child pseudo-class ਦੀ ਵਰਤੋਂ ਕਲਾਸ ਨਾਮ ਬਲਾਕ ਦੇ ਨਾਲ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਆਖਰੀ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਨਾਲ ਨਵੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਬਲਾਕ ਦੇ ਹੇਠਾਂ ਇੱਕ ਰੰਗਦਾਰ ਪੱਟੀ ਬਣਾਉਣਾ ਸੰਭਵ ਹੋ ਗਿਆ।

ਚੌਲ. 1. :ਲਾਸਟ-ਚਾਈਲਡ ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਨਤੀਜਾ

ਹਰੇਕ ਨਿਰਧਾਰਨ ਪ੍ਰਵਾਨਗੀ ਦੇ ਕਈ ਪੜਾਵਾਂ ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ।

ਬ੍ਰਾਊਜ਼ਰ ਟੇਬਲ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੀ ਨੋਟੇਸ਼ਨ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।

ਨੰਬਰ ਉਸ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸ ਤੋਂ ਸੰਪੱਤੀ ਸਮਰਥਿਤ ਹੈ।


CSS ਗਰਿੱਡ 'ਤੇ ਵੈੱਬਸਾਈਟ ਲੇਆਉਟ 'ਤੇ ਕੋਰਸ

ਸੂਡੋ-ਕਲਾਸਾਂ ਰਾਹੀਂ CSS ਵਿੱਚ ਤੱਤ ਚੁਣਨਾ - ਪਹਿਲਾ-ਬੱਚਾ, ਆਖਰੀ-ਬੱਚਾ ਅਤੇ ਨੌਵਾਂ-ਬੱਚਾ

 

ਸੂਚੀ ਦੇ ਹਰ ਤੀਜੇ ਤੱਤ ਨੂੰ ਚੁਣਨਾ:

 

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ
1.1
ਵਰਣਨ ਉਦਾਹਰਨ
<type> ਮੁੱਲ ਦੀ ਕਿਸਮ ਦੱਸਦਾ ਹੈ। <ਆਕਾਰ>
A&&B ਮੁੱਲ ਨਿਰਧਾਰਤ ਕ੍ਰਮ ਵਿੱਚ ਆਉਟਪੁੱਟ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। <size> && <color>
ਏ | ਬੀ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਸੁਝਾਏ ਗਏ ਮੁੱਲਾਂ ਵਿੱਚੋਂ ਸਿਰਫ਼ ਇੱਕ (A ਜਾਂ B) ਨੂੰ ਚੁਣਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਆਮ | ਛੋਟੇ-ਕੈਪਸ
ਏ || ਬੀ ਹਰੇਕ ਮੁੱਲ ਨੂੰ ਆਪਣੇ ਆਪ ਜਾਂ ਕਿਸੇ ਵੀ ਕ੍ਰਮ ਵਿੱਚ ਦੂਜਿਆਂ ਨਾਲ ਜੋੜ ਕੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਚੌੜਾਈ || ਗਿਣਤੀ
[ ] ਸਮੂਹ ਮੁੱਲ। [ ਫਸਲ || ਪਾਰ]
* ਜ਼ੀਰੋ ਜਾਂ ਜ਼ਿਆਦਾ ਵਾਰ ਦੁਹਰਾਓ। [,<time>]*
+ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਵਾਰ ਦੁਹਰਾਓ। <ਨੰਬਰ>+
? ਨਿਰਧਾਰਤ ਕਿਸਮ, ਸ਼ਬਦ ਜਾਂ ਸਮੂਹ ਵਿਕਲਪਿਕ ਹੈ। ਇਨਸੈੱਟ?
{ਅ, ਬੀ} ਘੱਟੋ-ਘੱਟ A ਨੂੰ ਦੁਹਰਾਓ, ਪਰ B ਤੋਂ ਵੱਧ ਵਾਰ ਨਹੀਂ। <ਰੇਡੀਅਸ>{1,4}
# ਕਾਮਿਆਂ ਨਾਲ ਵੱਖ ਕੀਤੇ ਇੱਕ ਜਾਂ ਵੱਧ ਵਾਰ ਦੁਹਰਾਓ। <ਸਮਾਂ>#
ਟੈਬ. 1. ਵੱਖ-ਵੱਖ ਸੂਡੋ-ਕਲਾਸ ਮੁੱਲਾਂ ਲਈ ਨਤੀਜਾ
ਭਾਵ ਆਈਟਮ ਨੰਬਰ ਵਰਣਨ
ਇੱਕ ਇੱਕ ਆਖਰੀ ਤੱਤ :ਲਾਸਟ-ਆਫ-ਟਾਈਪ ਸੂਡੋ-ਕਲਾਸ ਦਾ ਸਮਾਨਾਰਥੀ ਹੈ।
5 5 ਅੰਤ ਤੋਂ ਪੰਜਵਾਂ ਤੱਤ।
2 ਐਨ 2, 4, 6, 8, 10,… ਸਾਰੇ ਸਮ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੋਏ; ਸਮ ਮੁੱਲ ਦਾ ਐਨਾਲਾਗ।
2n+1 1, 3, 5, 7, 9,… ਸਾਰੇ ਅਜੀਬ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ; ਅਜੀਬ ਮੁੱਲ ਦਾ ਐਨਾਲਾਗ।
3 ਐਨ 3, 6, 9, 12,… ਹਰ ਤੀਜਾ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।
3n+2 2, 5, 8, 11, 14,… ਹਰ ਤੀਜਾ ਤੱਤ, ਅੰਤਮ ਤੱਤ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।
n+4 4, 5, 6, 7, 8,… ਆਖਰੀ ਤਿੰਨ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੇ ਤੱਤ।
-n+3 3, 2, 1 ਪਿਛਲੇ ਤਿੰਨ ਤੱਤ.
5n-2 3, 8, 13, 18, 23,… -
ਵੀ 2, 4, 6, 8, 10,… ਸਾਰੇ ਸਮ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੋਏ।
ਅਜੀਬ 1, 3, 5, 7, 9,… ਸਾਰੇ ਅਜੀਬ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੋਏ।
ਵੀ
ਭਾਵ
-n+3
  • "ਓਡ" - ਅਜੀਬ ਤੱਤ ਚੁਣੋ;

<li>3</li> p:nth-last-child(2) { CSS ਸੰਸਕਰਣ

css 1

ਵਰਣਨ

 

ਸਾਰੇ ਸਮਾਨ ਤੱਤ।
<h2>ਪਹਿਲਾ ਸਿਰਲੇਖ</h2> ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ; <style>

ਇੱਥੇ, pseudo-class :last-child(1) ਚੋਣਕਾਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਬਿਨਾਂ ਆਖਰੀ ਐਲੀਮੈਂਟ, <p>ਦੂਜਾ ਪੈਰਾ</p> ਚੁਣੇਗਾ। p:last-child(1) ਇੱਕੋ ਪੈਰੇ ਦੀ ਚੋਣ ਕਰੇਗਾ ਕਿਉਂਕਿ ਇਹ ਦੋਵੇਂ ਆਖਰੀ ਪੈਰੇ ਹਨ ਅਤੇ ਇਹ ਇੱਕ <p> ਤੱਤ ਹੈ। h2:last-child(1) ਕੁਝ ਵੀ ਨਹੀਂ ਚੁਣੇਗਾ ਕਿਉਂਕਿ ਦੋ ਸ਼ਰਤਾਂ ਇੱਕੋ ਸਮੇਂ ਮੇਲ ਨਹੀਂ ਖਾਂਦੀਆਂ: ਆਖਰੀ ਤੱਤ ਅਤੇ <h2> ਤੱਤ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, h2:last-child(2) <h2>ਦੂਜਾ ਸਿਰਲੇਖ</h2> ਚੁਣੇਗਾ, ਇੱਥੇ ਸ਼ਰਤਾਂ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਇੱਕੋ ਜਿਹੀਆਂ ਹਨ: <h2> ਤੱਤ ਅਤੇ ਅੰਤਮ ਤੱਤ।

<button>ਹੋਰ ਸਲਾਹ</button> <h2>ਦੂਜਾ ਸਿਰਲੇਖ</h2>

ਪਿਛਲੇ ਦੋ ਤੱਤ.

 

ਚੌਲ. 1. ਲੁਕਿਆ ਆਖਰੀ ਪੈਰਾ

ਬਟਨ {

ਆਖਰੀ ਐਲੀਮੈਂਟ ਨੂੰ ਚੁਣਦਾ ਹੈ, ਜਿਵੇਂ :ਲਾਸਟ-ਚਾਈਲਡ।

</style>

:nth-of-type() ਸੂਡੋ-ਕਲਾਸ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਸਿਰਫ਼ ਨਿਰਧਾਰਤ ਕਿਸਮ ਦੇ ਤੱਤ ਚੁਣਦਾ ਹੈ। ਇਸ ਲਈ h2:nth-last-type(1) ਦਾ ਮਤਲਬ ਹੈ ਆਖਰੀ <h2> ਐਲੀਮੈਂਟ ਨੂੰ ਚੁਣਨਾ। ਕਿਸੇ ਹੋਰ ਕਿਸਮ (<p>) ਦੇ ਤੱਤਾਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਉਪਰੋਕਤ HTML ਲਈ, h2:nth-last-type(1) <h2>ਦੂਜਾ ਹੈਡਿੰਗ</h2> ਸਤਰ ਚੁਣੇਗਾ ਕਿਉਂਕਿ ਇਹ <ਸੈਕਸ਼ਨ> ਦੇ ਅੰਦਰ ਆਖਰੀ <h2> ਤੱਤ ਹੈ।

 

:nth-child() ਅਤੇ :nth-of-type() ਸੂਡੋ-ਕਲਾਸ ਪਹਿਲਾਂ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਭੈਣ-ਭਰਾ ਤੱਤਾਂ ਦੇ ਸਮੂਹ ਵਿੱਚੋਂ ਦਿੱਤੇ ਗਏ ਤੱਤ ਚੁਣਦੇ ਹਨ। ਇਸ ਦੇ ਉਲਟ, :nth-last-child() ਅਤੇ :nth-last-of-type() ਸੂਡੋ-ਕਲਾਸ ਆਖਰੀ ਐਲੀਮੈਂਟ ਤੋਂ ਤੱਤ ਚੁਣਦੇ ਹਨ।

 

p:nth-last-of-type(1) ਦੀ ਬਜਾਏ ਤੁਸੀਂ p:last-of-type ਦੀ ਵਰਤੋਂ ਆਖਰੀ ਪੈਰੇ ਨੂੰ ਚੁਣਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ p:nth-of-type(n+1) ਦੀ ਵਰਤੋਂ ਪਹਿਲੇ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੇ ਪੈਰਿਆਂ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ। .

<!DOCTYPE html> <p>ਕੋਈ ਸਲਾਹ ਨਹੀਂ ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ।</p> </section> ਪੈਡਿੰਗ: 0.5rem 1rem; /* ਪਾਠ ਦੇ ਦੁਆਲੇ ਹਾਸ਼ੀਏ */

:nth-last-child(-n+2)

ਆਖਰੀ ਦੋ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੇ ਤੱਤ।

<p>ਪਹਿਲਾ ਪੈਰਾ</p>

ਸਾਰੇ ਅਜੀਬ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੋਏ।

<ਸੈਕਸ਼ਨ>
p:nth-last-of-type(1) {

h2:ਲਾਸਟ-ਚਾਈਲਡ(1) ਸੂਡੋ-ਕਲਾਸ ਗਰੁੱਪ ਵਿੱਚ ਆਖਰੀ ਤੱਤ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ, ਫਿਰ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਹੜਾ ਤੱਤ ਹੈ। ਜੇਕਰ ਇਹ <h2> ਹੈ ਤਾਂ ਇਹ ਚੁਣਿਆ ਜਾਵੇਗਾ, ਨਹੀਂ ਤਾਂ ਐਲੀਮੈਂਟ ਨਹੀਂ ਚੁਣਿਆ ਜਾਵੇਗਾ। ਇੱਕ ਉਦਾਹਰਨ ਦੇ ਤੌਰ ਤੇ, ਹੇਠ ਦਿੱਤੇ ਤੱਤ ਬਣਤਰ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

ਸੰਪਾਦਕ: Vlad Merzhevich

:nth-last-child(n+2)

ਪਿਛੋਕੜ: #f05347; /* ਲਾਲ ਪਿਛੋਕੜ ਦਾ ਰੰਗ */

:nth-last-child(2)

<p>ਜੇਕਰ ਤੁਹਾਨੂੰ ਲਗਾਤਾਰ ਤੀਜੇ ਦਿਨ ਨੀਂਦ ਆਉਂਦੀ ਹੈ -

ਆਓ ਕੁਝ ਉਦਾਹਰਣਾਂ ਲਈਏ।

ਡਿਸਪਲੇ: ਇਨਲਾਈਨ-ਬਲਾਕ /* ਸਮਗਰੀ ਦੀ ਚੌੜਾਈ ਫਿੱਟ */

ਲੁਕਿਆ ਹੋਇਆ ਆਖਰੀ ਪੈਰਾ

<section>
  <p>Второй абзац</p>

ਉਦਾਹਰਨ 1: :nth-last-of-type ਦੀ ਵਰਤੋਂ ਕਰਨਾ

<title>:nth-last-of-type()</title>

ਉਦਾਹਰਨ 1: nth-last-of-type ਵਰਤਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਡਿਸਪਲੇ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਕੋਈ ਨਹੀਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ <button> ਬਟਨ ਫੋਕਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ (ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ), ਬਟਨ ਦੇ ਹੇਠਾਂ ਸਾਰੇ ਪੈਰੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਜਦੋਂ ਬਟਨ ਫੋਕਸ ਗੁਆ ਦਿੰਦਾ ਹੈ (ਬਟਨ ਦੇ ਬਾਹਰ ਕਿਤੇ ਵੀ ਕਲਿੱਕ ਕਰੋ), ਪੈਰੇ ਦੁਬਾਰਾ ਲੁਕ ਜਾਂਦੇ ਹਨ।

 

ਪਿਛਲੀ ਵਾਰ ਸੋਧਿਆ ਗਿਆ: 03/12/2020

ਇਸ ਲਈ ਅੱਜ ਬੁੱਧਵਾਰ ਹੈ।</p>

:nth-last-child(1)
:nth-last-child(2n) или :nth-last-child(even)

ਇਸ ਉਦਾਹਰਨ ਦਾ ਨਤੀਜਾ ਚਿੱਤਰ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ. ਇੱਕ

:nth-last-child(2n+1) или :nth-last-child(odd)

ਅੰਤਮ ਤੱਤ ਚੁਣਦਾ ਹੈ।

ਡਿਸਪਲੇ: ਕੋਈ ਨਹੀਂ; /* ਆਖਰੀ ਪੈਰੇ ਨੂੰ ਲੁਕਾਓ */
<h2>ਜੀਵਨ ਸਲਾਹ</h2>
ਰੰਗ: #ffff; /* ਸਫੈਦ ਟੈਕਸਟ */
ਡਿਸਪਲੇ: ਬਲਾਕ; /* ਪੈਰੇ ਦਿਖਾਓ */

ਸਾਰੇ ਸਮ ਤੱਤ, ਅੰਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੋਏ। :nth-last-child(even) ਕੇਵਲ ਤਾਂ ਹੀ :nth-child(even) ਦੇ ਸਮਾਨ ਹੈ ਜੇਕਰ ਤੱਤਾਂ ਦੀ ਕੁੱਲ ਸੰਖਿਆ ਅਜੀਬ ਹੈ (ਉਦਾਹਰਨ ਲਈ ਪੰਜ); ਜੇਕਰ ਤੱਤਾਂ ਦੀ ਕੁੱਲ ਸੰਖਿਆ ਸਮ (ਛੇ, ਉਦਾਹਰਨ ਲਈ) ਹੈ, ਤਾਂ :nth-last-child(even) :nth-child(odd) ਦੇ ਸਮਾਨ ਹੈ।

</ section>

ਬਟਨ: ਫੋਕਸ ~ ਪੀ {


thoughts on “Css ਸੂਡੋ-ਕਲਾਸ - ਆਖਰੀ ਤੱਤ-ਆਖਰੀ

Leave a Reply

Your email address will not be published. Required fields are marked *