Css Selectors?

Css selectors are based on the CSS rule, with selector we give styles to particular html elements. These selectors are defining in the form of id, class, type, attribute and more.
Selectors are not start with a number.

Elements Selector:

Elements Selectors select the style only html elements. A selector of p has selected the all p elements of the html documents. In the following example styles will apply only ul element not div element.

ul { list-style:none; color:green; }

//Html Context:
<ul>
  <li>Web design</li>
  <li>User Interface </li>
  <li>User Experience </li>
</ul>

<div class="class-name">
  <p>Example paragraph text.</p>
</div>

ID Selector:

Id selector is target with # hash symbol. Id selectors are always unique within an html page and it selects a unique element. This selector matched with an id attribute in the html document the styles is applied on that element.

#container {width: 1170px; margin: auto}

Html Context:
<div id=”container”></div>

Above example styles will apply only id selector name container either these selector are define on the <p>, <span> elements, the styles will apply.

Class Selector:

Class Selector is target with dot symbol. Class selector is most common selector of all css selectors. Just a selector matched with an id attribute in the html document the styles is applied on that element.

.gray-txt {color:gray}

//Html Context:
<p class=”gray-txt”></p>
<span class=”gray-txt”></span>

Above example styles will apply only id selector name container either these selector are define on the <p>, <span> elements, the styles will apply.

Attribute Selector:

Attribute selector define between the square brackets. The selector selects elements with a specific html element attribute. Element selectors could use as tag, id selector and class selector.

a[title=”logo”] {color:#f90}
 
//Html Context:
<a href=”javascript:;” title=”logo”></a>
<a href=”javascript:;” title=”about us”></a>

Above example styles will apply only attribute of the html elements.

Leave a Comment.