CSS ਨੈਸਟ ਚੋਣਕਾਰ (&)

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

CSS ਨੈਸਟ (&) ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਇੱਕ ਹੋਰ ਤੱਤ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਤੱਤ ਨੂੰ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਨੈਸਟ ਨਾਲ, ਸਬੰਧਤ ਤੱਤਾਂ ਲਈ ਕਿਸੇ ਵੀ ਚੋਣਕਾਰ ਨੂੰ ਦੁਹਰਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਘੱਟ ਹੁੰਦੀ ਹੈ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਨੈਸਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਸੀਂ ਹਰੇਕ ਚੋਣਕਾਰ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਐਲਾਨ ਕਰਨਾ ਹੈ, ਜਿਵੇਂ ਹੇਠ ਦਿੱਤਾ ਗਿਆ ਹੈ:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

ਖ਼ੁਦ ਦੋਹਰਾਓ

ਉਦਾਹਰਣ 2

ਨੈਸਟ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਚੋਣਕਾਰ ਨੂੰ ਕਿਤਾਬੀ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਸਬੰਧਤ ਸਟਾਈਲ ਰੂਲਾਂ ਨੂੰ ਮਾਤਾ ਰੂਲ ਵਿੱਚ ਗਰੁੱਪ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

ਖ਼ੁਦ ਦੋਹਰਾਓ

ਸੁਝਾਅ:ਅਗਰ ਉਪਰੋਕਤ .box ਸਟਾਈਲ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਹਟਾਉਣਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਪੂਰੇ ਗਰੁੱਪ ਨੂੰ ਹਟਾ ਸਕਦੇ ਹੋ, ਬਿਨਾ ਕਿ ਸਬੰਧਤ ਚੋਣਕਾਰ ਲੱਭਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ。

CSS ਗਰੰਥ

parentrule {
  css ਐਲਾਨਾਂ;
  & childrule {
    css ਐਲਾਨਾਂ;  } 
}

ਤਕਨੀਕੀ ਵੇਰਵੇ

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