CSS Selectors & Rules

From Knowledge Kitchen
Jump to navigation Jump to search


Selectors

Allow you to specify which elements to style.

Select elements by tag name

Style particular elements by their type, like styling all <p> tags, or all <h1> tags, etc.

/* the following selects any <p> elements */
p {
    color: blue;
}

Select elements by id

Styling particular elements by their unique id attribute.

/* the following selects any elements with the id "foo" */
#foo {
    color: blue;
}

Select elements by class

Styling particular elements by their class attribute.

/* the following selects any elements of the class "bar" */
.bar {
    color: blue; 
}


Selecting by hierarchy

Using a space in a selector indicates a hierarchical relationship between elements.

/* selects any strong elements nested inside a <p> element. */
p strong {
    color: blue;
}
/* selects the strong element with the unique id "foo" that is nested inside a <p> element that is nested inside a <div> element with the class "bar" */
div.bar p strong#foo {
    color: blue;
}


Selecting direct descendants only

This following CSS code would match any <a> elements that are direct descendants of any <p> elements.

 p > a {
 	/* add some css rules here */
 }


For example, it would match the <a> tag in the following code snippet:

 <p>
  	This is a paragraph of text with a
  	<a href="http://duckduckgo.com">link in it</a>
 </p>

But it would not match the <a> tag in this example:

 <p>
  	This is a paragraph of text with a
  	<ul>
  	 	<li>This is a <a href="http://duckduckgo.com">link</a></li>
  	</ul>
 </p>

This does not match because the <a> tag is not a direct descendant of the <p> element. It is a grandchild element of the <p>, not a direct child element.

Selecting elements with compound selectors

The above selector types can be mixed and matched in any combination.

/* selects any <p> elements with the class "bar" and the id "foo" */
p.bar#foo {
    color: blue;
}
/* selects any <p> elements with the class "bar" and the id "foo" that are within any article element that is within a section element with the class "news" */
section.news article p.bar#foo {
    color: blue;
}


Applying the same set of rules to multiple selectors

You can apply a single block of rules to multiple selectors using a "," to separate the selectors.

/* apply these rules to all p elements and any h1 elements with the id "foo" */
p, h1#foo {
    background-color: pink;
}
/* apply these rules to all p elements, any h1 elements with the id "foo", and all articles with the class "bar" that are within section elements */
p, h1#foo, section article.bar {
    background-color: pink;
}

Rules

Apply specific styles to apply, consisting of a property to change and the new value to assign to it.

/* example of setting a bunch of rules */
p {
    color: blue;
    border: 1px solid red;
    font-weight: bold;
    font-family: 'helvetica neue', helvetica, 'sans-serif';
    margin-left: 4px;
    padding-top: 4px;
}


What links here

{{Special:WhatLinksHere/CSS_Selectors_%26_Rules}}