css selectors
DESCRIPTION
Every css selector that you will ever needTRANSCRIPT
CSS Selectors
It’s So Simple
Selector {
propertyName : value;
propertyName : value
}
Basic Selectors
* (Universal selector)
/* Select every element and apply the following properties */
* {
padding : 0;
margin : 0
}
Tag Selector (Just random tag)
span {
background : red;
}
p {
width : 250px;
font-size : 18px;
}
<!--
Select all elements with tag span/ p
-->
<!-- Many span elements -->
<span>Some span</span>
<span>Some span</span>
<!-- Many p elements -->
<p> Some paragraf</p>
<p> Some paragraf</p>
#IdName (id selector)
#mainDiv {
background : red;
width : 500px;
height : 500px
}
<!-- Main div with ID -->
<div id=“mainDiv”></div>
<!-- Some divs -->
<div> Just a Div</div>
<div> Just a Div</div>
<div class=“classDiv”>
Just a Class Div
</div>
.ClassName (Class Selector)
.justDiv{
background : red;
width : 50px;
height : 50px
}
<!– First Div -->
<div class=“justDiv”></div>
<!– Second Div -->
<div class=“justDiv”></div>
….
<!– Nth Div -->
<div class=“justDiv”></div>
Attribute Selector
Selector[attributeName = “value”]
img[alt= “someAlt”] {
width : 500px;
height : 50px
}
.allForms[type = “text”]{
width : 150px;
padding : 10px
}
<img src=“#” alt=“someAlt”/>
<img src=“#” alt=“onlyAlt”/>
<form>
<input type=“text”/>
<input type=“text”/>
<input type=“submit”/>
</form>
Attribute Selector Magic
Selector[attr.Name ^= “value”]{
/*select attribute with value at the beginning */
}
Selector[attr.Name *= “value”]{
/* select attribute with value somewhere*/
}
Selector[attr.Name $= “value”]{
/*select attribute with value at the end*/
}
p[id ^=“beginning”] {
width : 500px;
height : 50px
}
p[id *= “somewere”] {
width : 500px;
height : 50px
}
p[id $= “end”] {
width : 500px;
height : 50px
}
<p id=“beginning-id”>
Beginning Text
</p>
<p id=“this-is-somewere-id”>
Somewere Text
</p>
<p id=“id-at-end”>
End Text
</p>
Combinators Child and Sibling Selectors
Parent Child
<!-- Just a list --> <ul> <li>Item 1</li> <li>Item 2</li> <ol> <li>Nested Item</li> </ol> </ul> <!-- List with class --> <ul> <li class=“item”>Item 1</li> <li>Item 2</li> </ul>
ul li{
background : red;
}
ul .Item {
background : red;
}
Parent>Child (Direct Children Selector)
<!-- Just a list -->
<ul>
<!– direct children -->
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li> Nested 1 </li>
<li> Nested 2 </li>
<li> Nested 3 </li>
</ol>
</ul>
ul > li{
background : red;
}
Sibling + Sibling (Direct Sibling selector)
<p> Sample text 1 </p>
<p> Sample text 2 </p>
<div> Just a Box</div>
<p>Sample text 3</p>
<!– This won’t work -->
<div>Just a Box 2</div>
<span>This won’t work</span> <p>Sample text 3</p>
p + p{
background : red;
font-size:18px;
}
div + p{
background : red;
font-size:18px;
}
Sibling ~ Sibling (Any Sibling Selector)
<p> Sample text 1 </p>
<p> Sample text 2 </p>
<div> Just a Box</div>
<p>Sample text 3</p>
<!– This will work -->
<div>Just a Box 2</div>
<span>This will work</span> <p>Sample text 3</p>
p ~ p{
background : red;
font-size:18px;
}
div ~ p{
background : red;
font-size:18px;
}