Zaɓin Babban Abun Ci gaba a cikin CSS- Dabaru da Misalai

Darussan karya

Azuzuwan ƙididdiga suna ba ku damar zaɓar takamaiman jihohi ko matsayi na wani yanki. Misali, :hover yana zaɓar nau'in lokacin da ma'aunin linzamin kwamfuta ke samansa, :focus yana zaɓar nau'in lokacin da aka zaɓa ko kuma yana da hankali, :nth-child() zaɓi takamaiman ɓangaren yara a cikin rukuni.

Misalai:

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

Abubuwan ƙira

Pseudo-elements suna ba ku damar ƙirƙirar abubuwa masu kama-da-wane don keɓance abin da ke akwai.

Misali, ::before kuma ::after ƙirƙirar abubuwa kafin da bayan element, ::first-line kuma ::first-letter zaɓi layin farko da harafin farko na element.

Misalai:

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

Masu haɗawa

Masu haɗawa suna ba ku damar haɗa masu zaɓe don zaɓar abubuwa dangane da alaƙar su. Misali, element1 element2 zaɓi element2 ciki element1, element1 > element2 zaɓi abubuwan yara kai tsaye element1, element1 + element2 zaɓi nan element2 da nan bayan element1.

Misalai:

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

Masu zaɓen sifa

Masu zaɓin sifa suna ba ku damar zaɓar abubuwa bisa ƙimar halayensu. Misali, [attribute] yana zaɓar abubuwa tare da sifa attribute, [attribute=value] zaɓi abubuwa masu sifa attribute daidai da value, [attribute^=value] zaɓi abubuwan da sifa attribute ta fara da value.

Misalai:

/* 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() mai zaɓe

Mai zaɓin yana ba ka damar zaɓar abubuwan da basu dace da takamaiman zaɓi ba. Misali, zaɓi abubuwan da ba su da aji, zaɓi abubuwan da ba su da ID. :not() :not(.class) class :not(#id) id

Misalai:

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

Waɗannan misalan suna nuna zaɓi na ci gaba a cikin CSS. Kuna iya keɓancewa da amfani da waɗannan fasahohin don salo da keɓance abubuwa akan shafin yanar gizon ku kamar yadda ake so.