More selectors

The table below shows the combinations of selectors to target the various elements of the HTML. Also, some of the example of ‘Attribute selector’ is shown in this section.

Table 2.1: List of selectors
Selectors	Description
h1, p, span etc.	element selector
.className	class selector
#idName	id selector
*	Universal selector (selects everything)
h1.className	select h1 with class ‘className’
h1#idName	select h1 with id ‘idName’
p span	descendant selector (select span which is inside p)
p > span	child selector (‘span’ which is direct descendant of ‘p’)
h1, h2, p	group selection (select h1, h2 and p)
span[my_id]	select ‘span’ with attribute ‘my_id’
span[my_id=m_span]	select ‘span’ with attribute ‘my_id=m_span’

Attribute selector

Add below code at the end of the html file. In these lines ‘custom attributes’ are added (i.e. my_id).


	      
            1 <!-- css.html --> 

            2 <span my_id='m_span'> Span with attribute 'my_id' with value 'm_span' </span> 

            3 <br> 

            4 <span my_id='m_span2'> Span with attribute 'my_id' with value 'm_span2' </span>

These custom attributes can be selected as below,


	     
            1 /*attribute selection*/ 

            2 span[my_id] { /* select 'span' with attribute 'my_id' */ 

            3 color: green; 

            4 font-weight: bold 

            5 } 

            6 span[my_id=m_span] { /* select 'span' with attribute 'my_id = m_span' */ 

            7 color: red; 

            8 }

Previous Next