Għażla ta' Element Avvanzata f'CSS- Tekniki u Eżempji

Psewdo-klassijiet

Psewdo-klassijiet jippermettulek tagħżel stati jew pożizzjonijiet speċifiċi ta 'element. Pereżempju, :hover jagħżel l-element meta l-pointer tal-maws ikun fuqu, :focus jagħżel l-element meta jintgħażel jew ikollu fokus, :nth-child() jagħżel element tifel speċifiku fi grupp.

Eżempji:

/* 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;  
}  

 

Psewdo-elementi

Psewdo-elementi jippermettulek toħloq elementi virtwali biex tippersonalizza element eżistenti.

Per eżempju, ::before u ::after oħloq elementi qabel u wara element, ::first-line u ::first-letter agħżel l-ewwel linja u l-ewwel ittra ta 'element.

Eżempji:

/* 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;  
}  

 

Kombinaturi

Il-kombinaturi jippermettulek tgħaqqad is-seletturi biex tagħżel elementi bbażati fuq ir-relazzjoni tagħhom. Pereżempju, element1 element2 jagħżel element2 ġewwa element1, element1 > element2 jagħżel elementi tfal diretti ta ' element1, element1 + element2 jagħżel element2 immedjatament wara element1.

Eżempji:

/* 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;  
}  

 

Seletturi tal-attributi

Seletturi tal-attributi jippermettulek tagħżel elementi bbażati fuq il-valur tal-attributi tagħhom. Pereżempju, [attribute] jagħżel elementi bl-attribut attribute, [attribute=value] jagħżel elementi bl-attribut attribute ugwali għal value, [attribute^=value] jagħżel elementi bl-attribut li attribute jibda minn value.

Eżempji:

/* 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() selettur

Is -selettur jippermettilek tagħżel elementi li ma jaqblux ma' selettur speċifiku. Pereżempju, jagħżel elementi li m'għandhomx il-klassi, jagħżel elementi li m'għandhomx l-ID. :not() :not(.class) class :not(#id) id

Eżempji:

/* 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;  
}  

 

Dawn l-eżempji juru għażla avvanzata ta' elementi fis-CSS. Tista' tippersonalizza u tapplika dawn it-tekniki għall-istil u tippersonalizza elementi fuq il-paġna web tiegħek kif mixtieq.