Not attribute targeting an element

Question

I'm having some trouble working with the :not() pseudo-class, I'm starting to consider my goal to be unavailable within CSS alone.

Here's a codepen of my work

What I am trying to achieve is the to make the first letter within the paragraph that are not within a the span to change.

section p:not([span]):first-letter  {
  font-size:50px;
  font-family:'Cinzel Decorative';
}

<p><span>Unchanged text</span> Changed text</p> // Goal <---

I have both have tried and know that classes work, however that would require me to change a lot of previous code and would highly prefer the span element in this case. And since there is several paragraph sections it wouldn't be efficient to look for a value either.

Answer 1

UPDATE 3

I finally have my laptop (was using iPhone) and see the codepen, so here's my take on it.

• I wanted to change layout, but I didn't because there must be a method to the madness (Although I did change the content; See the last 2 items of this list.)
• The layout in general is the display:table-* group.
• The 2 sub headings? "What we do" and "Our work" are ::before pseudo-elements.
• The <span> now serves as :first-letter since each browser's interpretation of :first-letter is too wacky we'll just pass on that.

CODEPEN

EDIT

OK, jumped the gun on Snippet 2, see Snippet 3 which is Snippet 2 without first-letter. first-letter is replaced by a pseudo-element ::before. Beat that Firefox!

Details are commented in Snippet

SNIPPET 3

/* position: absolute will take span out
|| of the flow. This means whatever affects 
|| the <span> directly will not affect the 
|| <p> and vice versa.
*/

/* ch is a measure unit equalling the width
||   of a zero. It's size is relative to
||   font-size. I find ch indispensible when
||   dealing with text.
*/

span {
  position: absolute;
  left: -12ch;
}
/* Since :first-letter behaves differently than what's
|| desired in Firefox, we'll use a ::before pseudo-
|| and then position it over the 'C'
*/
/* We can adjust the line-height (/40%) to bring both <span> 
|| and <p> in vertical alignment. The left: 1.2ch is the 
|| space between <span> and <p>. The white background is
|| the hacky part which is used to hide the original
|| 'C'. Since the majority of the measurements (i.e. ch)
|| are relative,the setup is responsive as long as you
|| remeber that it's relative to font-size.
*/

p::before {
  content: 'C';
  font: 100 3ch/40% Times;
  color: red;
  background: white;
  position: relative;
  left: 1.2ch;
}
p {
  position: relative;
  left: 12ch;
}

<!--All textNodes residing within <p> includes it's

descendant's textNodes as well. This is evident if we use

.textContent or jQuery .text(). Knowing that, we should

expect that a direct approach using CSS to change the 'C'

with pseudo-selector :first-letter would fail.-->




<p><span>Unchanged text</span> Changed text</p>


<!--Getting the <span> out of the way so that the :first-

letter will be 'C' instead of 'A' is the first step-->

---

---

OLD

UPDATE 1

See Snippet 2 I used position:relative and absolute so that the <span> is in a different flow from the rest. Got this idea from BoltClock's and Oriol's convo.

---

I was thinking: What's the wackiest CSS property? and I came up with this using floats

SNIPPET 1

span {
  float: left
}
p:first-letter {
  font: 100 3ch/60% Times;
  color: red;
  float: left;
  padding-left: .5ch;
}
p {
  float: left;
}

<p><span>Unchanged text</span> Changed text</p>

SNIPPET 2

span {
  position: absolute;
  left: -12.5ch;
}
p:first-letter {
  font: 100 3ch/40% Times;
  color: red;
  position: relative;
  padding-left: .5ch;
}
p {
  position: relative;
  left: 12ch;
}

<p><span>Unchanged text</span> Changed text</p>

Answer 2

If you are willing to change a bit your markup, making it semantically correct, you can achieve it by doing this below:

section {
  max-width: 80%;
   margin: 10px auto; /* changed for demo */
  background-color: rgba(0, 0, 0, 0.3);
  padding-bottom: 2%;
}
section h1 {
  margin: 0;
  text-align: center;
  font-size: 250%;
  padding: 1%;
  background-color: rgba(0, 0, 0, .5);
  color: #C55757;
  font-family: 'Syncopate';
}
section h2 {
  font-size: 30px;
  display: block;
  padding: 1%;
  font-family: 'Syncopate';
  color: #C55757;
  background-color: rgba(0, 0, 0, .35);
}
section div {
  display: inline-block;
  font-size: 20px;
  color: white;
  padding: 1%;
  width: 47%;
  text-align: center;
  vertical-align: top;
  font-family: 'Open Sans Condensed';
  margin-top: 2%;
}
section div:last-of-type {
  border-left: 2px solid black;
}
section p:first-of-type::first-letter {
  font-size: 50px;
  font-family: Cinzel Decorative;
}

<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Syncopate|Open+Sans+Condensed" rel="stylesheet">

<section>
  <h1>Company Name</h1>
  <div>
    <h2>What we do
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet tincidunt ornare. Quisque rutrum velit mi, eget aliquet turpis consectetur vel. Maecenas convallis nunc pulvinar urna placerat, nec tincidunt massa </p><p>Morbi quis vehicula leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis id felis dapibus lectus auctor faucibus vitae vel urna. Vivamus vel dui elit.
    </p>
  </div>
  <div>
    <h2>Our company
    </h2>
    <p>Nunc eget odio sit amet lorem consequat dictum. In consequat, nunc at feugiat volutpat, lacus sapien mollis lectus, sed facilisis risus massa vel augue. Nam at tellus ac odio consectetur interdum ut et ex. Nullam in tincidunt nunc. Nunc tincidunt est eu neque molestie, vitae suscipit ante egestas. Cras id auctor arcu.</p><p>
Cras eget metus tincidunt, eleifend mi id, congue elit. Aenean faucibus est leo, nec rhoncus justo aliquam nec. Praesent erat erat, pellentesque at varius in, ultrices quis urna.
    </p>
  </div>
</section>