CSS selectors by Alphabats

A

::after


After is a pseudo element which is used for insert some text directly into webpage with out written in main html.
CSS:-
.button:after { content:"csszilla"; display:block;}
HTML:-
<a href="#" class="button"></a>


::before


before is a pseudo element which is used for insert some text directly into website, same as after element.
CSS:-
.button:before { content:"csszilla"; display:block;}
HTML:-
<a href="#" class="button"></a>


:active

The :active pseudo selector is used to change the color of element when clicked or when element is activated. Generally :active is used in a tag in navigation etc.
CSS:-
ul li a.active { background-color:#333;}
HTML:-
<ul>
<li>
   <a href="#" class="active">CSS ZILLA</a>
</li>
</ul> 


Attribute

css has ability to target HTML based on their attribute. You are aware from class and ID. ok lets see also rel attribute.
CSS:-
h2[rel="back_color"] { color:#CC3300;}
HTML:-
<div>
<h2 id="title" class="wonder" rel="back_color">CSS ZILLA</h2> 

here you control h2 styles with rel attribute same as classes and ID.


C

:checked

:checked is pseudo-class which is active only when element is selected. It apply only on input type radio and input type checkbox.

CSS:-


input[type=checkbox] + label {

  color: #ccc;

  font-style: italic;


input[type=checkbox]:checked + label {

  color: #f00;

  font-style: normal;

}

HTML:-


<input type="checkbox" id="css_zilla" name="csszilla"> 
<label for="csszilla">CSS ZILLA is Awesome</label>

Child property


child property is used to work first child to nth child.

take an example 

HTML:-

<ul>

<li>Avantika</li>
<li>Ankit</li>

</ul>
  • Avantika
  • Ankit

CSS:-

ul li { font-size:12px; color:#009933;}
ul li:first-child { color:#FF0000; font-size:15px;}


Class

class is also a selector of css. We can identify a html element by its class name, 
for example we make a button of input type ok, if we want to give styles to this button we make a class.

CSS:-

.button { background:#333; color:#fff; font-family:arial; font-size:13px;}

HTML:-

<input type="button" class="button" value="css zilla">


D

:default

The :default pseudo selector will match the default in group. for example in a group of radio buttons a radio button is selected by default, even if the user has selected a different value.

HTML:-



<ul>

  <li>

    <input type="radio" name="color" value="yellow" id="yellow"> 

    <label for="yellow">yellow</label>

  </li>
  <li>
    <input type="radio" name="green" value="green" id="green" checked> 
    <label for="green">green</label>
  </li>
  <li>
    <input type="radio" name="blue" value="blue" id="blue"> 
    <label for="blue">blue</label>
  </li>
</ul>
here green label button is selected by default whenever user have right to select more than one option. but green label is selected by default.


:disabled

Elements that can receive the disabled attribute is not activated either on mouse hover and focus. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus.

E

:empty

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment. 
In simple empty pseudo selector will select empty div.
Example p:empty { display:none;}
div:empty { display:none;}

























Comments

Popular Posts