Zgjedhja e avancuar e elementeve në CSS- Teknika dhe shembuj

Pseudo-klasa

Pseudo-klasat ju lejojnë të zgjidhni gjendje ose pozicione specifike të një elementi. Për shembull, :hover zgjedh elementin kur treguesi i miut është mbi të, :focus zgjedh elementin kur zgjidhet ose ka fokus, :nth-child() zgjedh një element specifik fëmijë në një grup.

Shembuj:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

Pseudo-elemente

Pseudo-elementet ju lejojnë të krijoni elemente virtuale për të personalizuar një element ekzistues.

Për shembull, ::before krijoni ::after elementë para dhe pas një elementi ::first-line dhe ::first-letter zgjidhni rreshtin e parë dhe shkronjën e parë të një elementi.

Shembuj:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

Kombinatorët

Kombinatorët ju lejojnë të kombinoni përzgjedhës për të zgjedhur elementë bazuar në marrëdhëniet e tyre. Për shembull, element1 element2 zgjedh element2 brenda element1, element1 > element2 zgjedh elemente të drejtpërdrejta të fëmijës së element1, element1 + element2 zgjedh element2 menjëherë pas element1.

Shembuj:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

Zgjedhësit e atributeve

Zgjedhësit e atributeve ju lejojnë të zgjidhni elementë bazuar në vlerën e atributeve të tyre. Për shembull, [attribute] zgjedh elemente me atributin attribute, [attribute=value] zgjedh elementë me atribut attribute të barabartë me value, [attribute^=value] përzgjedh elementë me atributin attribute që fillon me value.

Shembuj:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

:not() përzgjedhës

Zgjedhësi ju lejon të zgjidhni elementë që nuk përputhen me një përzgjedhës specifik. Për shembull, zgjedh elementë që nuk kanë klasën, zgjedh elementë që nuk kanë ID. :not() :not(.class) class :not(#id) id

Shembuj:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

Këta shembuj demonstrojnë zgjedhjen e avancuar të elementeve në CSS. Ju mund t'i personalizoni dhe zbatoni këto teknika për të stiluar dhe përshtatur elementet në faqen tuaj të internetit sipas dëshirës.