CSS selector priority rules

Question

I am having a hard time with CSS selector rules I have already checked here for specificty rules. I have tried using firebug and inspecting the element with google chrome and copying the CSS path. But I cannot get the CSS to work. I am using bootstrap. Also this is my first time making a website so any criticism is great (unless it is negative). Here is my code for the page I am trying to change.

#page-content-wrapper > div > div > center > h1 > font {
color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="">

<title>Pediaclinic</title>

<!-- Bootstrap Core CSS -->
<link  id="myCSS1" href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link id="myCSS2" href="css/simple-sidebar.css" rel="stylesheet">
</head>



<!-- webpage begins -->


<body background="background2.jpg">

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">

                <li>
                    <a href="C:\Users\G\Desktop\website.files\Home.html">Home</a>
                </li>
                <li>

                  <li>
                    <a href="javascript:; " data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> More Info <i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="demo" class="collapse">
                        <li>
                            <a href="C:\Users\G\Desktop\website.files\About Us.html">About Us</a>
                        </li>
                        <li>
                            <a href="C:\Users\G\Desktop\website.files\Staff.html">Staff</a>
                        </li>
                        <li>
                            <a href="C:\Users\G\Desktop\website.files\PDFs.html">PDFs</a>
                        </li>
                    </ul>

                </li>
                <li>
                    <a href="C:\Users\G\Desktop\website.files\New Patients.html">New Patients</a>
                </li>
                <li>
                    <a href="C:\Users\G\Desktop\website.files\Contact Us.html">Contact Us</a>
                </li>
                <li>
                    <a href="C:\Users\G\Desktop\website.files\Location.html">Location</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content ===========================================================================================================-->
        <div id="page-content-wrapper">                
            <div class="container-fluid">
              <div class="row">
                <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Show Menu</a>
                <P>&nbsp;</P>           
                <P>&nbsp;</P>
                <P>&nbsp;</P>
                <P>&nbsp;</P>
                <P>&nbsp;</P>

                <center class="heading"><h1><font>***Home***</font></h1></center> 
                <P>&nbsp;</P>           
                <P>&nbsp;</P>
                <P>&nbsp;</P>
                <P>&nbsp;</P>
                <P>&nbsp;</P>



                <p> </p>
                <div class="container">
                  <div class="jumbotron">
                    <h2>Basic Info</h2> 
                    <ul><p class="section-paragraph"> The purpose of the website is to give you general knowlege
                    </p></ul>
                </div>






                <footer>
                    <div class="container" >
                        <div class="row">
                            <div class="col-lg-12">
                                <p>Copyright 2015&copy; This website was made by G</p>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.container -->
                </footer>
            </div>
        </div>


    </div>
</div>

In the main code you should see Home bolded and in italic (it is under webpage begins). That is what I am trying to change with CSS.

You can only have one `body` tag in any given HTML 5 document. — connexo, Aug 10 '15 at 16:34
Using `#page-content-wrapper > div > div > center > h1` as a selector is far away from good practice and makes your css very vulnerable to HTML structural changes. Always use the least specific selector that does the job. Don't ever mimic DOM structure in your CSS selectors. — connexo, Aug 10 '15 at 16:37
"any criticism is great (unless it is negative)" <- Lol. "Wash me, but don't make me wet!" — connexo, Aug 10 '15 at 16:38
Connexo thank you for the perfect example of criticism that is negative and not helpful at all. — Jon_the_developer, Aug 10 '15 at 17:55

Paulie_D · Accepted Answer · 2015-08-10T18:40:33.817

The <font> and <center> element tags have been deprecated and should no longer be used.

If we strip out all the extraneous and deprecated code we are left with this basic structure

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
        <h1 class="heading">Home</h1>
    </div>
  </div>
</div>

In which case the selector:

#page-content-wrapper > div > div > h1.heading {
text-align: center; /* center the text */
font-style: italic; /* make it italic */
color: red; /* color it red */
}

should be adequate unless there are other factors of which we are not aware.

It's not necessary to apply any other "bolding" as heading tags are bold by default.

Codepen Demo

Note: this selector us very specific and something more generic (and less specific) might more be appropriate depending on whether the style is to be reused on other headings/elements in other parts of the page.

This is helpful information, thank you. – Jon_the_developer Aug 10 '15 at 17:51 — Jon_the_developer, Aug 10 '15 at 17:51

score 0 · Answer 2 · answered Aug 10 '15 at 15:27

0

There is too much of everything.

Too many unnecessary/deprecated elements. You don't need <center> and <font> elements.

Too much of specificity. #page-content-wrapper h1 { ...} should be sufficient.

answered Aug 10 '15 at 15:27

Dima

517
1
3
18

I agree to your opinion, yet you fail to explain in detail what should be changed and why. – connexo Aug 10 '15 at 16:33
@connexo You're right, I often times think that I explain myself clearly, while others don't. There is no need to edit my answer now, yours is very detailed. – Dima Aug 10 '15 at 17:04
Answers like these are counter productive. Try to be specific. – Jon_the_developer Aug 10 '15 at 17:51

Yerko Palma · Answer 3 · 2015-08-10T15:43:30.540

0

Some tips:

Don't use font element

If you wanna change the bold and italic style use this css rules

element.style {
    font-style: normal;
    font-weight: normal;
}

For CSS specificity, the most powerful statement is the !importantkeyword in your style, like this
```
element.style {
    font-style: normal !important;
    font-weight: normal !important;
}
```

EDIT As MDN says

Always look for a way to use specificity before even considering !important

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Never use !important on site-wide css.

So, you should look to this selectors, in increasing order

Universal selectors (e.g., *)
Type selectors (e.g., h1)
Class selectors (e.g., .example)
Attributes selectors (e.g., [type="radio"])
Pseudo-classes (e.g., :hover)
ID selectors (e.g., #example)
Inline style (e.g., style="font-weight:bold")

edited Aug 10 '15 at 15:43

answered Aug 10 '15 at 15:30

Yerko Palma

12,041
5
33
57

Using `!important` is very bad practice and kills the cascading nature of CSS. More here: http://stackoverflow.com/a/3706876/1035147 - I would not recommend anyone use `!important` – Gerico Aug 10 '15 at 15:37
!important declaration should be avoided unless it is not possible to do without it. – Dima Aug 10 '15 at 15:37
You are right, I'll edit my answer – Yerko Palma Aug 10 '15 at 15:39
Done editing, added mdn thoughts on `!important` – Yerko Palma Aug 10 '15 at 15:46
I had to learn it too. That MDN specificity chart list is wrong. – connexo Aug 10 '15 at 16:35

CSS selector priority rules

3 Answers3