CSS In CSS-Datei nach Klassen suchen

[srynoname]

Hallo zusammen,

suche ein Standalone Tool oder Addon für Visual Studio Code, in dem ich eine CSS-Datei öffnen und anschließend nach Klassennamen suchen kann. Suche nach "hidden" soll dann nur die Stellen treffen, an denen "hidden" im Selektor vorkommt. "hidden" in z.B. "visibility:hidden" soll dagegen nicht Teil der Treffer sein. Kennt da jemand etwas? Danke!

 

[sedot]

Notepad++ sollte das können, aber schau lieber selbst nochmal in die Doku.
http://docs.notepad-plus-plus.org/index.php/Searching_And_Replacing

 

[srynoname]

Notepad++ sollte das können, aber schau lieber selbst nochmal in die Doku.
http://docs.notepad-plus-plus.org/index.php/Searching_And_Replacing

In der Doku finde ich speziell zu CSS leider nichts.

 

[sedot]

Die Sprache ist egal, css geht. Nur bei der Suchfunktion bin ich mir gerade nicht sicher, andererseits ist die ziemlich umfangreich.

 

[srynoname]

Die Sprache ist egal, css geht.

Aber ich möchte nicht nur nach beliebigen Strings suchen, sondern nach String im CSS Selektor. Dafür muss die Datei dann schon entsprechend geparst werden / NPP braucht speziell dafür eine Funktion. Und die kann ich nicht finden bzw. scheint es nicht zu geben.

 

[sedot]

Oh, ja, nee, wenn du die Datei in Notepad öffnen kannst, kannst du die durchsuchen. Möglicherweise habe ich deine Frage falsch verstanden.
Den exakten Klassennamen „hidden“ zu finden sollte funktionieren.

 

[srynoname]

Oh, ja, nee, wenn du die Datei in Notepad öffnen kannst, kannst du die durchsuchen. Möglicherweise habe ich deine Frage falsch verstanden.

Ja, ich brauche da mehr:

Suche nach "hidden" soll dann nur die Stellen treffen, an denen "hidden" im Selektor vorkommt. "hidden" in z.B. "visibility:hidden" soll dagegen nicht Teil der Treffer sein.

Reine Textsuche reicht da nicht, die findet ja alle Treffer für "hidden", egal in welchem Kontext das "hidden" vorkommt.

 

[sedot]

Notepad++ kann mehr als reine Textsuche, z.B.auch Wildcards, deshalb mein Vorschlag.

edit: Eine Anleitung kann ich gerade nicht bieten.

 

[kim88]

Verstehe ich was falsch? Aber wenn du nach einer Klasse in CSS sichst suche doch nach „.hidden“ und nicht nach „hidden“ 🤷‍♂️

 

[Yuuri]

Öffne mal die Command Palette und stell ein @ voran.

Ab ca. 2:50:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[ayngush]

Meinst du so etwas ähnliches?

#

Das kann man über das Addon "HTML CSS Support" in VSCode hinbekommen.
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Edit: Geht dann übrigens auch, wie im Video oben genannt, über ctrl + p und

@hidden

in der CSS-Datei. Es werden dann alle Klassensymbole gefunden, die hidden beinhalten.

 

[Yuuri]

Er will zu Symbolen springen:

Dumpfe Suche (29 Treffer):

Suche nach Symbolen:

(am Beispiel vom CB CSS)

 

[coolmodi]

Da es die Fuktion nach Symbolen zu Suchen in VSC offensichtlich schon gibt hier wohl eher unnötig, aber Vollständigkeitshalber hier auch noch die Regexlösung, was man als Programmierer so oder so können sollte.

Suche nach allen Klassen in einer CSS-Datei, welche "hidden" im Namen enthalten: \.([\w-]*hidden[^{\s]*)

Funktioniert in VSC, NP++, und jeder anderen Suche, welche Regex kann. Weiterhin kann man damit dann auch so Dinge tun, wie z.B. das "hidden" überall zu ersetzen. Z.B. \.([^,-]*)-*hidden([^{\s]*) und .$1$2 lässt alle Klasseen wie .class-hidden-test zu .class-test werden.

Edit: Nur ein Beispiel und eher nicht Praxisrelevant, da man in dem Fall ja auch alle Vorkommen in anderen Dateien ändern müsste.