What Is Appropriate Ordering of CSS Selector? Eg P.Class or .Class P

What is appropriate ordering of css selector? eg p.class or .class p

The difference is the space between them, which is the descendant combinator in CSS.

The selector a.aname will match an anchor element with the class aname while the .aname a will match an anchor element that is a descendant of an element with the class aname:

<a class="aname">This matches the first rule</a>

<span class="aname"><a>This matches the second rule</a></span>

CSS combinators:

space = descendant combinator

> = child combinator (direct descendant)

+ = adjacent sibling combinator

The Selectutorial gives a pretty good overview or selectors and combinators.

If you use selectors where you can put identifiers together without combinators between them, the order doesn't matter. Example:

#id.class { ... }
.class#id { ... }

p.classname or .classname p, any difference?

So when you do

p.classname{
  ... 
}

You are looking for a <p> with class classname

when you do

.classname p

You are looking for a p that is a descendant of the classes classname.

In CSS . is used as a selector for a class name.

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

• ids (example: #main selects <div id="main">)
• classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
• elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

• count the number of id selectors: there is one for each (#nav)
• count the number of class selectors: there is one for each (:hover and .active)
• count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

How to select the first, second, or third element with a given class name?

You probably finally realized this between posting this question and today, but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

Or, to put it simply, since you said in your comment that

there are no uniform parent containers

... it's just not possible with selectors alone, without modifying the markup in some way as shown by the other answers.

You have to use the jQuery .eq() solution.

How to specify the order of CSS classes?

The order in which the attributes are overwritten is not determined by the order the classes are defined in the class attribute, but instead where they appear in the CSS.

.myClass1 {color:red;}.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

Select all descendant of one class except those inside another class (and vice versa)

Here is a simple solution with CSS variables. Check the following question for more details: CSS scoped custom property ignored when used to calculate variable in outer scope

* {  margin: 0.2em 0;  width: fit-content;}
div {  margin-left: 1em}
p {  background: var(--c);}.cyan {  --c:cyan;}.orange {  --c:orange;}

<div class="orange">  <p>Orange</p>  <div>    <p>Orange</p>    <div>      <p>Orange</p>      <div class="cyan">        <p>Cyan</p>        <div>          <p>Cyan</p>        </div>      </div>    </div>  </div></div><div class="cyan">  <p>Cyan</p>  <div>    <p>Cyan</p>    <div>      <p>Cyan</p>      <div class="orange">        <p>Orange</p>        <div>          <p>Orange</p>        </div>      </div>    </div>  </div></div>

What is the difference in writing these two codes?

In Code 1

.box h1 {
   font-family: 'Jost', sans-serif;
   text-align: center;
}

It is looking for h1 tag inside tag with class .box. and will update the style of that h1
ie.

<div class="box">
    <h1>Some Text</h1>
</div>

Some text here will have style font-family: 'Jost', sans-serif;text-align: center;

In Code 2

h1 .box {
    font-family: 'Jost', sans-serif;
    text-align: center;
}

It is looking for class .box inside h1 tag

ie.

<h1><span class="box">Some</span>Text</h1>

Here styles will be applicable on Some only

CSS selector for first element with class

This is one of the most well-known examples of authors misunderstanding how :first-child works. Introduced in CSS2, the :first-child pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.

Selectors level 3 introduces a :first-of-type pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child and :first-of-type. However, as with :first-child, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p.

Unfortunately, there is no similar :first-of-class pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match() pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child() itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match() matched across the entire document (see the final note below).

While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~ in an overriding rule:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Now only the first element with class="red" will have a border.

Here's an illustration of how the rules are applied:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>