Roghnú Ardghnéithe i CSS- Teicnící agus Samplaí

Pseudo-ranganna

Ceadaíonn pseudo-ranganna duit stáit nó suímh ar leith d’eilimint a roghnú. Mar shampla, :hover roghnaíonn sé an eilimint nuair a bhíonn an pointeoir luiche os a chionn, :focus roghnaíonn sé an eilimint nuair a roghnaítear é nó nuair a bhíonn fócas aige, :nth-child() roghnaíonn sé eilimint leanbh ar leith i ngrúpa.

Samplaí:

/* 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-eilimintí

Ceadaíonn pseudo-eilimintí duit eilimintí fíorúla a chruthú chun eilimint atá ann cheana féin a shaincheapadh.

Mar shampla, ::before agus ::after cruthaigh eilimintí roimh eilimint agus ina diaidh, ::first-line agus ::first-letter roghnaigh an chéad líne agus an chéad litir d’eilimint.

Samplaí:

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

Comhcheangail

Ceadaíonn comhcheangail duit roghnóirí a chur le chéile chun eilimintí a roghnú bunaithe ar a gcaidreamh. Mar shampla element1 element2 roghnaíonn, element2 taobh istigh roghnaíonn element1, element1 > element2 roghnaíonn díreach leanbh gnéithe de element1, element1 + element2 roghnaíonn element2 díreach tar éis element1.

Samplaí:

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

Roghnóirí tréithe

Ligeann roghnóirí tréithe duit gnéithe a roghnú bunaithe ar luach a gcuid tréithe. Mar shampla, [attribute] roghnaítear gnéithe leis an aitreabúid attribute, [attribute=value] roghnaítear gnéithe leis an aitreabúid attribute comhionann le value, [attribute^=value] roghnaítear gnéithe leis an tréith attribute ag tosú le value.

Samplaí:

/* 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() roghnóir

Ligeann an roghnóir duit gnéithe a roghnú nach dtagann le roghnóir ar leith. Mar shampla, roghnaíonn sé eilimintí nach bhfuil an rang acu, roghnaíonn sé gnéithe nach bhfuil an ID acu. :not() :not(.class) class :not(#id) id

Samplaí:

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

Léiríonn na samplaí seo ard-roghnú eilimintí i CSS. Is féidir leat na teicníochtaí seo a shaincheapadh agus a chur i bhfeidhm ar eilimintí ar do leathanach gréasáin a stíl agus a shaincheapadh de réir mar is mian leat.